源码：https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx

代码版无刷新

插件刷新版

原理：点页码的时候，我们不再去访问这个页面，而是去访问一般处理程序，把当前页，每页显示的大小，传过去，然后我们去获取数据，然后返回到前台，用js进行处理。（原理理解了，你会发现说到无刷新差不多都是这样的套路）

提问：我们什么时候去访问处理程序，或者说在那里进行这个操作

这个插件有个回调函数，并且这个回调函数里面自带一个当前页的参数，那还等什么，就是它了

前面都是一样的：

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="../CSS/TableCSS.css" rel="stylesheet" />

    <link href="../CSS/pagination.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">

        <div class="tableDiv">

            <asp:Repeater ID="repList" runat="server">

                <HeaderTemplate>

                    <table>

                        <tr>

                            <th>序号</th>

                            <th>名字</th>

                            <th>父级ID</th>

                            <th>显示</th>

                        </tr>

                </HeaderTemplate>

                <ItemTemplate>

                    <tr>

                        <td><%# RowIndex++ %></td>

                        <td><%# Eval("Name")%></td>

                        <td><%# Eval("Pid") %></td>

                        <td><%# Eval("LevalNum") %></td>

                    </tr>

                </ItemTemplate>

            </asp:Repeater>

        </div>

        <div class="pagelistbody boxsizing">

            <div class="pagebox">

                <div class="page flickr">

                </div>

            </div>

            <div class="pagemsg">

                <p>共<span><%= pcount %></span>条数据，共<span><%=Math.Ceiling(decimal.Parse(pcount.ToString())/pagesize) %></span>页，当前第<span><%= page+ %></span>页</p>

            </div>

        </div>

        <script src="../JS/jquery-1.11.0.min.js"></script>

        <script src="../JS/jquery.tableui.js"></script>

        <script src="../JS/jquery.pagination.js"></script>

js：

  <script>

            $(function () {

                $("table").tableUI();

                //分页插件方法

                $(".page").pagination(<%= pcount %>, {

                    num_edge_entries:,  //边缘页数

                    num_display_entries:,  //主体页数

                    callback:pageCallback,  //回调函数

                    items_per_page:<%= pagesize%>,      //每页显示条数

                    current_page:<%= page%>,  //当前页

                    prev_text: "上一页",

                    next_text: "下一页"

                    //分页链接   strUrl是需要传递的参数  get提交

            });

            //回调函数

                function pageCallback(page_id,jq){

                    //page_id  为 当前页码-1  注意这个page_id，你点第一页它是0，你点第3页它是2  需要小心了

                    $.ajax({

                        type:"Post",

                        url:"FenYe.ashx",

                        dataType:"json",

                        data:"page="+page_id+"&pageSize="+<%=pagesize %>,

                        async:true,

                        success:function(data){

                            $("table tr:gt(0)").remove();

                            var GetData=eval(data);

                            $.each(GetData,function(i,item){

                                var dd="<tr";

                                i=++i;

                                if (i%!=) {

                                    dd+=" class=\"odd\"";

                                }else {

                                    dd+=" class=\"even\"";

                                }

                                dd+="><td>"+i+"</td><td>"+item.Name+"</td><td>"+item.Pid+"</td><td>"+item.LevalNum+"</td></tr>";

                               // $("table").append("<tr class=\"even\"><td>"+(++i)+"</td><td>"+item.Name+"</td><td>"+item.Pid+"</td><td>"+item.LevalNum+"</td></tr>");

                                $("table").append(dd);

                            })

                        }

                    })

                    return true;  //返回真就刷新，返回假不会刷新

                }

            });

        </script>

后台跟刷新一样的

  public partial class FenYeAjax : System.Web.UI.Page

    {

        public int RowIndex = ;

        public int page = ;

        public int pcount = ;

        public int pagesize = ;

        public string strUrl = "";

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                pcount = new FunctionDemo.BLL.Category().GetRecordCount("1=1");

                repList.DataSource = new FunctionDemo.BLL.Category().GetPageList("1=1", pagesize, page);

                repList.DataBind();

            }

        }

    }

我们的一般处理程序

需要引用：

 需要引用，这个外部的

 public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            int page = context.Request.Form["page"] == null ?  : Convert.ToInt32(context.Request.Form["page"].ToString());

            int pageSize = Convert.ToInt32(context.Request.Form["pageSize"]);

            DataTable dt = new FunctionDemo.BLL.Category().GetPageList("1=1", pageSize, page).Tables[];

            context.Response.Write(JsonConvert.SerializeObject(dt));

        }

效果：

这个过程是不刷新的。

jQuery Pagination分页插件--无刷新的更多相关文章

  1. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  2. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ajax分页2：jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. jquery+jquery.pagination+php+ajax 无刷新分页

    <!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...

  5. jquery.pagination +JSON 动态无刷新分页

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...

  6. Jquery Pagination分页插件使用

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...

  7. JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

    JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...

  8. jQuery Pagination分页插件的使用

    一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...

  9. jquery.pagination.js数据无刷新真分页

    定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...

随机推荐

  1. 实现网上大神的asp.net mvc + ef +easyui

    大神开源博客: http://www.cnblogs.com/ymnets/p/3424309.html 系统更换UI:本人喜欢基于bootstrap的adminlteUI,所以后面会将UI更换为ad ...

  2. JS异步解决方案之概念理解-----------阻塞和非阻塞，同步和异步，并发和并行，单线程和多线程

    首先记住一句话,JS是单线程的. 单线程意味着什么?单线程意味着 它不能依靠自己实现异步. JS实现的异步,往往都是靠 浏览器.Node 的机制(事件驱动.回调)实现的. 下面让我这个单身狗 以谈恋爱 ...

  3. BZOJ 4919: [Lydsy1706月赛]大根堆 启发式合并

    我不会告诉你这是线段树合并的好题的... 好吧我们可以搞一个multiset在dfs时求出LIS(自带二分+排序)进行启发式合并,轻松加愉悦... #include<cstdio> #in ...

  4. Linux如何用查看域名解析

    方法/步骤     查看本地dns配置.确保能上网,dns配置正确.可以查看网卡配置文件和dns配置文件,网卡里配置优先.   ping命令.第一行会返回域名及解析的ip.   host命令.会返回域 ...

  5. 关于String的split方法

    在做剑指offer的时候,有一道替换空格的题,立刻就想到用这个split方法来做,但发现,这个方法会丢掉字符串最后的空格??? 百度后,知道原因,这里直接复制粘贴了: 在使用java中的split按照 ...

  6. Unity Gizmos可视化辅助工具

    所有gizmo绘制需要在脚本的OnDrawGizmos或OnDrawGizmosSelected里函数完成. OnDrawGizmos在每帧调用.所有在OnDrawGizmos中渲染的gizmos都是 ...

  7. (转)Linux修改eth2到eth0（70-persistent-net.rules）

    之前在公司提供的虚拟机器上面,一直有个问题用着很不舒服,为什么它的IP选择的设备的eth2的,但是我在/etc/sysconfig/network-scrpts/下面也没有找到ifcfg-eth2的配 ...

  8. Json数组对象和对象数组

    Json的简单介绍 从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如“北京”这个单独的词. 第二种 ...

  9. oracle存储过程jdbc调用

    package com.jckb.procedure; import java.sql.CallableStatement; import java.sql.Connection; import ja ...

  10. Java 在使用@Select遇到的问题：拼接字符串将数组拼为了字符串

    Java再用@Select拼接sql语句时候, #{参数名}:是加引号的 ${参数名}:是不加引号的 例如: userIds为List或者数组,值为1,2,3,4,5 1.@Select(" ...