jQuery Pagination分页插件--无刷新

原理：点页码的时候，我们不再去访问这个页面，而是去访问一般处理程序，把当前页，每页显示的大小，传过去，然后我们去获取数据，然后返回到前台，用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+1 %></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:1,  //边缘页数
                    num_display_entries:4,  //主体页数
                    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%2!=0) {
                                    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 = 1;
        public int page = 0;
        public int pcount = 0;
        public int pagesize = 2;

        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();

            }
        }
    }

我们的一般处理程序

需要引用：

jQuery Pagination分页插件--无刷新需要引用，这个外部的

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int page = context.Request.Form["page"] == null ? 0 : 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[0];
            context.Response.Write(JsonConvert.SerializeObject(dt));
        }

效果：

jQuery Pagination分页插件--无刷新

这个过程是不刷新的。

秒客网

jQuery Pagination分页插件--无刷新

相关文章