jquery静态分页?用着不错的插件

所属分类:导航-分页

 2636  12  查看评论 (3)
jquery静态分页?用着不错的插件 ie兼容6

使用方法

$("#Pagination").pagination(56, {
   num_edge_entries: 2,
   num_display_entries: 4,
   callback: pageselectCallback,
   items_per_page:1
});

参数

参数名            描述            参数值            
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回调函数默认无执行效果
相关插件-分页

jQuery分页插件bs_pagination

bs_pagination是jQuery分页插件,基于Bootstrap。完全可配置的,响应网页设计。
  分页
 39086  131

自己编写的jquery分页插件,通用性很强(原创)

只需要传递后台获取的数据总条数和每页数量,回调返回当前页码数用于ajax请求
  分页
 3308  18
  分页
 33808  69

实用的分页插件zxf_page.js

基于jquery的分页插件
  分页
 17260  86

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    ?浅若微笑?? 0
    2018/5/24 11:25:32
    有没有动态加载数据的demo,菜鸟初学分页功能,求大神给个完整的demo,谢谢~
        依凡1
        2018/5/24 16:23:22

        HTML

        <h1>jQuery Pagination分页插件ajax demo</h1>
        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
        <div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>
        <div id="hiddenresult" style="display:none;">
            <!-- 列表元素 -->
        </div>
        依凡1
        2018/5/24 16:24:35

        JS

        //此demo通过Ajax加载分页元素
        var initPagination = function() {
            var num_entries = $("#hiddenresult div.result").length;
            // 创建分页
            $("#Pagination").pagination(num_entries, {
                num_edge_entries: 1, //边缘页数
                num_display_entries: 4, //主体页数
                callback: pageselectCallback,
                items_per_page: 1, //每页显示1项
                prev_text: "前一页",
                next_text: "后一页"
            });
        };
        
        function pageselectCallback(page_index, jq) {
            var new_content = $("#hiddenresult div.result:eq(" + page_index + ")").clone();
            $("#Searchresult").empty().append(new_content); //装载对应分页的内容
            return false;
        }
        //ajax加载
        $("#hiddenresult").load("load.html", null, initPagination);
        });
    回复
取消回复