JQPAGINATION分页插件实践

最新推荐文章于 2024-05-21 17:16:51 发布

chinet_bridge

最新推荐文章于 2024-05-21 17:16:51 发布

阅读量2.9k

点赞数

分类专栏： jq插件鉴赏分页

本文链接：https://blog.csdn.net/chinet_bridge/article/details/47134265

版权

jq插件鉴赏分页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQPAGINATION分页插件参考资料：http://blog.csdn.net/chinet_bridge/article/details/12488719

献上实用代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="./css/jqpagination.css" />
    <script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jquery.jqpagination.js"></script>
    <script id="myTemp" type="text/html">
            <li>名称：{Name}，用户名：{LoginID}</li>
    </script>
</head>
<body>
    <ul id="myRecord">
    </ul>
    <div class="gigantic pagination">
        <a href="#" class="first" data-action="first">«</a> <a href="#" class="previous"
            data-action="previous">‹</a>
        <input type="text" readonly="readonly" />
        <a href="#" class="next" data-action="next">›</a> <a href="#" class="last"
            data-action="last">»</a>
    </div>
    <div class="clearfix">
    </div>
</body>
</html>
<script type="text/javascript" language="javascript">
    var MPAGE = 0;
    var SIZE = 2;
    function rpt(p) {
        $.ajaxSettings.async = false;
        $.getJSON('./lib/company.json').done(function (data) {
            if (p == 1) {
                MPAGE =Math.ceil(data.total/SIZE);
            }
            $('#myRecord').html('');
            var start = (p - 1) * SIZE;
            var end = Math.min(p * SIZE, data.total);
            for (var i = start, j = end; i < j; i++) {
                var item = data.rows[i];
                var tmp = $('#myTemp').html();
                tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; });
                $('#myRecord').append(tmp);
            }
        });
        $.ajaxSettings.async = true;
    }
    rpt(1);

    $('.pagination').jqPagination({
        link_string: '/?page={page_number}',
        max_page: MPAGE,
        paged: function (page) {
            rpt(page);
        }
    });
</script>

如果是用ajax,读取总记录数和数据内容最好分开两个ajax. 像上面那样只用一个ajax，就要将异步改成同步,因为总记录数要在分页功能初始化之前生成数据。要是显示数据内容单独做成一个ajax，这个ajax则可以保持异步。说到这里还是感觉繁琐。笔者想到另外一套思路。可以先将数据转js数组。看代码：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./css/jqpagination.css" />
    <script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jquery.jqpagination.js"></script>
    <script id="myTemp" type="text/html">
            <li>名称：{Name}，用户名：{LoginID}</li>
    </script>
</head>
<body>
    <ul id="myRecord">
    </ul>
    <div class="gigantic pagination">
        <a href="#" class="first" data-action="first">«</a> <a href="#" class="previous"
            data-action="previous">‹</a>
        <input type="text" readonly="readonly" />
        <a href="#" class="next" data-action="next">›</a> <a href="#" class="last"
            data-action="last">»</a>
    </div>
    <div class="clearfix">
    </div>
</body>
</html>
<script type="text/javascript" language="javascript">
    var ROWS = [{ "Name": "上海陆地信息公司", "LoginID": "yu" }, { "Name": "上海陆空电子信息公司", "LoginID": "tianya" }, { "Name": "上海中草药有限公司", "LoginID": "yutian" }, { "Name": "上海眉飞色舞娱乐有限公司", "LoginID": "tianya21" }, { "Name": "天天饮食股份有限公司", "LoginID": "tiantian" }, { "Name": "上海陆空电脑培训中心", "LoginID": "tiantianjian" }, { "Name": "碧海蓝天餐饮娱乐有限公司", "LoginID": "bihai" }, { "Name": "天天发笔记本公司", "LoginID": "tiantianfa" }, { "Name": "集运通信科技有限公司", "LoginID": "jiyun" }, { "Name": "东方红太阳能有限公司", "LoginID": "dongfanghong" }, { "Name": "上海有线传媒有限公司", "LoginID": "youxian" }, { "Name": "HP笔记本生产公司", "LoginID": "hp" }, { "Name": "上海空中楼阁设计有限公司", "LoginID": "kongzhong" }, { "Name": "上海海鸥科技博览馆", "LoginID": "haiou" }, { "Name": "上海千珂企业形像策划制作有限公司", "LoginID": "qianke" }, { "Name": "上海可喜可乐有限公司", "LoginID": "kexkl" }, { "Name": "天使婴儿用品有限公司", "LoginID": "tianshi" }, { "Name": "安妮2测试有限公司", "LoginID": "annee" }, { "Name": "中石信息技术有限公司", "LoginID": "airong"}];
    var SIZE = 2;
    var MPAGE = Math.ceil(ROWS.length/SIZE);
    function rpt(p) {
            $('#myRecord').html('');
            var start = (p - 1) * SIZE;
            var end = Math.min(p * SIZE, ROWS.length);
            for (var i = start, j = end; i < j; i++) {
                var item = ROWS[i];
                var tmp = $('#myTemp').html();
                tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; });
                $('#myRecord').append(tmp);
            }
    }
    rpt(1);
    $('.pagination').jqPagination({
        link_string: '/?page={page_number}',
        max_page: MPAGE,
        paged: function (page) {
            rpt(page);
        }
    });
</script>

如果需要支持url分页，代码示例：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./css/jqpagination.css" />
    <script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jquery.jqpagination.js"></script>
    <script id="myTemp" type="text/html">
            <li>名称：{Name}，用户名：{LoginID}</li>
    </script>
</head>
<body>
    <ul id="myRecord">
    </ul>
    <div class="gigantic pagination">
        <a href="#" class="first" data-action="first">«</a> <a href="#" class="previous"
            data-action="previous">‹</a>
        <input type="text" readonly="readonly" />
        <a href="#" class="next" data-action="next">›</a> <a href="#" class="last"
            data-action="last">»</a>
    </div>
    <div class="clearfix">
    </div>
</body>
</html>
<script type="text/javascript" language="javascript"    >
    var ROWS = [{ "Name": "上海陆地信息公司", "LoginID": "yu" }, { "Name": "上海陆空电子信息公司", "LoginID": "tianya" }, { "Name": "上海中草药有限公司", "LoginID": "yutian" }, { "Name": "上海眉飞色舞娱乐有限公司", "LoginID": "tianya21" }, { "Name": "天天饮食股份有限公司", "LoginID": "tiantian" }, { "Name": "上海陆空电脑培训中心", "LoginID": "tiantianjian" }, { "Name": "碧海蓝天餐饮娱乐有限公司", "LoginID": "bihai" }, { "Name": "天天发笔记本公司", "LoginID": "tiantianfa" }, { "Name": "集运通信科技有限公司", "LoginID": "jiyun" }, { "Name": "东方红太阳能有限公司", "LoginID": "dongfanghong" }, { "Name": "上海有线传媒有限公司", "LoginID": "youxian" }, { "Name": "HP笔记本生产公司", "LoginID": "hp" }, { "Name": "上海空中楼阁设计有限公司", "LoginID": "kongzhong" }, { "Name": "上海海鸥科技博览馆", "LoginID": "haiou" }, { "Name": "上海千珂企业形像策划制作有限公司", "LoginID": "qianke" }, { "Name": "上海可喜可乐有限公司", "LoginID": "kexkl" }, { "Name": "天使婴儿用品有限公司", "LoginID": "tianshi" }, { "Name": "安妮2测试有限公司", "LoginID": "annee" }, { "Name": "中石信息技术有限公司", "LoginID": "airong"}];
    var SIZE = 2;
    var MPAGE = Math.ceil(ROWS.length / SIZE);

    var rpt = function (c) {
        var href = window.location.href, s = window.location.search, reg = /(&?)page=(\d+)/;
        if (c!=0) {
            var char = s == '' ? '?' : '&';
            if (reg.test(href)) {
                href = href.replace(reg, char + 'page=' + c);
            } else {
                href += char + 'page=' + c;
            }
            window.location.href = href.replace('?&', '?');
        } else {
            var _page = s.match(reg); c = _page ? _page[2] : 1;
            $('.pagination').jqPagination({
                current_page: c,
                link_string: '',
                max_page: MPAGE,
                paged: function (page) {
                    rpt(page);
                }
            });

            //前端显示数据内容代码开始，此处可用服务端代码代替显示
            $('#myRecord').html('');
            var start = (c - 1) * SIZE;
            var end = Math.min(c * SIZE, ROWS.length);
            for (var i = start, j = end; i < j; i++) {
                var item = ROWS[i];
                var tmp = $('#myTemp').html();
                tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; });
                $('#myRecord').append(tmp);
            }
            //前端显示数据内容代码开始，此处可用服务端代码代替显示
        }
    }

    rpt(0);
</script>

chinet_bridge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JQPAGINATION分页插件实践

献上实用分页代码名称：{Name}，用户名：{LoginID} « <a href="#" class="previous" data-action="previous">‹ › <a href="#" clas
复制链接

扫一扫