Jquery.Pagination查询后分页问题

最近使用Jquery.Pagination在asp.net中进行无刷新分页的使用，然后效果成功了。但是现在需要一个功能，就是输入一个名字，按照名字查询结果后再进行分页，怎么实现呢。基本代码如下，
  var pageIndex = 0;     //页面索引初始值
    var pageSize = 10;     //每页显示条数初始化，修改显示条数，修改这里即可
   
   
    $(function() {       
        InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）
                                                            
        //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一页',       //上一页按钮里text
            next_text: '下一页',       //下一页按钮里text
            items_per_page: pageSize,  //显示条数
            num_display_entries: 6, 
    
            current_page: pageIndex,   //当前页索引
            num_edge_entries: 2        //两侧首尾分页条目数
        });
            
        //翻页调用
        function PageCallback(index, jq) {           
            InitTable(index);
        }

        //请求数据
        function InitTable(pageIndex) {  
       
            var pid=$('#hpid').trim();
            var han=$('#han').trim();               
            $.ajax({ 
                type: "POST",   
                dataType: "text",
                url: '../PagesOp.aspx',      //提交到一般处理程序请求数据
                data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize+"&pid="+pid+"&han="+han,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                
                success: function(data) {                                 
                    $("#chList tr:gt(0)").remove();        //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
                    $("#chList").append(data);             //将返回的数据追加到表格
                }
            });            
        }
        
    });

但查询后怎么从新定义输出的数据呢。

9 个解决方案

#1

重新执行一次
 $("#Pagination").pagination( <%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一页',       //上一页按钮里text
            next_text: '下一页',       //下一页按钮里text
            items_per_page: pageSize,  //显示条数
            num_display_entries: 6, 
    
            current_page: pageIndex,   //当前页索引
            num_edge_entries: 2        //两侧首尾分页条目数
        });

这个代码就行了，红色部分修改为你ajax返回总记录数。

#2

真巧，前两天我也用的这个插件做的，需求也差不多，我也是按照版主的方式解决的，包括hash监听。不过感觉这个插件不好用，如果是内部处理pageTotalCount就好了，后台也封装好分页对象，pageTotalCount和resultList赋值给插件，如果用<%=pageCount %>是不是也很麻烦，不知道你是怎么做的，能不能分享下

#3

看到1楼的回答非常高兴试了一下，
1.添加一个查询按钮
 <div class="bar">
 <a class="btn-lit" href="javascript:answer();"><span>已处理的问题</span></a>
 </div>
2.调用前面刷新的事件
function answer()
    {
       $("#han").val("1");
       //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一页',       //上一页按钮里text
            next_text: '下一页',       //下一页按钮里text
            items_per_page: pageSize,  //显示条数
            num_display_entries: 6, 
    
            current_page: pageIndex,   //当前页索引
            num_edge_entries: 2        //两侧首尾分页条目数
        });
    }


数据是查到了，但是没有刷新数据，需要手动点一下“上一页”或“下一页”才可以显示查询后的数据。

#4

执行$("#Pagination").pagination只是更新了导航的dom结构，内容是不会刷新的，你需要自己发送一次ajax请求查询结果

function answer()
    {
       $("#han").val("1");
       //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一页',       //上一页按钮里text
            next_text: '下一页',       //下一页按钮里text
            items_per_page: pageSize,  //显示条数
            num_display_entries: 6, 
    
            current_page: pageIndex,   //当前页索引
            num_edge_entries: 2        //两侧首尾分页条目数
        });
InitTable(0,'an=1')////////////要执行一次取你需要的数据的代码，并传递参数
    }

   //请求数据
        function InitTable(pageIndex,params) {  /////////增加附件参数
       
            var pid=$('#hpid').trim();
            var han=$('#han').trim();               
            $.ajax({ 
                type: "POST",   
                dataType: "text",
                url: '../PagesOp.aspx',      //提交到一般处理程序请求数据
                data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize+"&pid="+pid+"&han="+han+(params?'&'+params:''), //////传递了附加参数则加上
                success: function(data) {                                 
                    $("#chList tr:gt(0)").remove();        //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
                    $("#chList").append(data);             //将返回的数据追加到表格
                }
            });            
        }
        
    });

#5

试了半天还是不好用，楼上的手高有没有demo给一个学习一下。万分感谢。[e-mail]

#6

4楼不是说的很明白了么，。，。

发送ajax请求的时候把新增的参数(就是你说的查询条件)带进去就可以了。

还有JQUERY的ajax传参你这么拼接字符串不累么？

为什么不写成

data:{
    pageIndex:pageIndex +1,
    pageSize:pageSize
}

这样可能分页的数字什么的还不会更新，偷懒一点重新构造一个pagination拉倒。

#7

  $("#btn").click(function () {
                $.post("TongjiFenxi.aspx", { action: "get" }, function (data) {
                    $("#Pagination").pagination(data, {
                        callback: PageCallback,
                        prev_text: '上一页',       //上一页按钮里text
                        next_text: '下一页',       //下一页按钮里text
                        items_per_page: pageSize,  //显示条数
                        num_display_entries: 6,    //连续分页主体部分分页条目数
                        current_page: pageIndex,   //当前页索引
                        num_edge_entries: 1//两侧首尾分页条目数
                    })
                })
            });

#8

你们发现了没：ajax请求时url被执行了2次，有哪位大神出来指点吗。。。。

#9

引用 8 楼 f530476701 的回复:

你们发现了没：ajax请求时url被执行了2次，有哪位大神出来指点吗。。。。

因为初始的时候会加载一次callback事件