分页插件 jquery.pagination.js

中文文档

http://www.zhangxinxu.com/jq/pagination_zh/

参数说明

参数名	描述	参数值
maxentries	总条目数	必选参数，整数
items_per_page	每页显示的条目数	可选参数，默认是10
num_display_entries	连续分页主体部分显示的分页条目数	可选参数，默认是10
current_page	当前选中的页面	可选参数，默认是0，表示第1页
num_edge_entries	两侧显示的首尾分页的条目数	可选参数，默认是0
link_to	分页的链接	字符串，可选参数，默认是"#"
prev_text	“前一页”分页按钮上显示的文字	字符串参数，可选，默认是"Prev"
next_text	“下一页”分页按钮上显示的文字	字符串参数，可选，默认是"Next"
ellipse_text	省略的页数用什么文字表示	可选字符串参数，默认是"..."
prev_show_always	是否显示“前一页”分页按钮	布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always	是否显示“下一页”分页按钮	布尔型，可选参数，默认为true，即显示“下一页”按钮
callback	回调函数	默认无执行效果

前端代码

<table id="tb1">
</table>     

<div id="page1"class="pagination">
</div>

js代码

    var pageSize=3;

        $("#page1").pagination(7, {
            'callback': function(index,jq){
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: 'page',      //提交到一般处理程序请求数据
                    data: {'index':index,'pageSize':pageSize},          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
                    success: function (data) {
                        var str="";
                        $('#tb1').empty();

                        $.each(data,function(key,value){
                            if(value){
                                str+='<tr><td>'+value.id+'</td><td>'+value.name+'</td></tr>';
                            }
                        })

                        $("#tb1").html(str);             //将返回的数据追加到表格
                    }
                })
            },
            'prev_text': '上一页',       //上一页按钮里text
            'next_text': '下一页',       //下一页按钮里text
            'items_per_page': pageSize,  //显示条数
            'num_display_entries': 3,    //连续分页主体部分分页条目数
           // 'current_page': pageIndex,   //当前页索引
            'num_edge_entries': 2        //两侧首尾分页条目数
        });

 

转载于:https://my.oschina.net/u/2978130/blog/847728