分页插件

Posted 2020-11-09 luis-gong

LayUI

下载地址：

http://www.layui.com/

引用:

• layui.css
• layui.js

<h1>LayUI分页控件</h1>
<div>
    <div id="demo7"></div>
</div>

  layui.use([‘laypage‘, ‘layer‘], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //完整功能
        laypage.render({
            elem: ‘demo7‘
            , count: 100//记录总数
            , limit: 20//每页显示记录数
            , layout: [‘count‘, ‘prev‘, ‘page‘, ‘next‘, ‘limit‘, ‘refresh‘, ‘skip‘]
            , jump: function (obj) {
                console.log(obj)
            }
        });
    });

参考文章：

http://www.php.cn/js-tutorial-384763.html

 JqPaginator

可以支持多种样式风格

引用：

1 bootstrap.min.css
2 jquery
3 jqPaginator.js

代码：

1  $.jqPaginator(‘#pagination1‘, {
2         totalPages: 100,//总页数
3         visiblePages: 10,//显示页码数量
4         currentPage: 3,//当前选中
5         onPageChange: function (num, type) {
6             $(‘#p1‘).text(type + ‘：‘ + num);
7         }
8     });