jquery z-pager.js jquery分页插件可以设置url与htmlbox-BFW插件库

jquery z-pager.js jquery分页插件可以设置url与htmlbox

jquery z-pager.js jquery分页插件，可以设置url与htmlbox，非常强大好用

配置如下

$.fn.zPager.defaults = {
    totalData: 10, //数据总条数
    pageData: 5, //每页数据条数
    pageCount: 0, //总页数
    current: 1, //当前页码数
    pageStep: 8, //当前可见最多页码个数
    minPage: 5, //最小页码数，页码小于此数值则不显示上下分页按钮
    active: 'current', //当前页码样式
    prevBtn: 'pg-prev', //上一页按钮
    nextBtn: 'pg-next', //下一页按钮
    btnBool: true, //是否显示上一页下一页
    firstBtn: 'pg-first', //第一页按钮
    lastBtn: 'pg-last', //最后一页按钮
    btnShow: true, //是否显示第一页和最后一页按钮
    disabled: true, //按钮失效样式
    ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
    url: '', //ajax路由
    htmlBox: '' //ajax数据写入容器
}

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["z-pager", "z-pager"], function() {
                $("#pager").zPager({
                    totalData: 50,
                    htmlBox: $('#wraper'),
                    btnShow: true,
                    ajaxSetData: false,
                    dataRender: function(data) {
                        console.log(data + '---data-2');
                        alert(data);
                    },
                });

            });
        });
    </script>
</head>
<body>
    <div style="text-align: center;margin:250px auto;">
        <div id="pager" class="pager clearfix">
        </div>
    </div>
</body>
</html>