您的位置：首页 > Web前端 > JQuery

jQuery插件第五十六：十七种翻页插件

2015-07-13 16:01 591 查看

应用在17种不同场景下的翻页，让你编写js分页只需提供记录总数，其他配值默认。下面介绍比较常用的三种场景。

先来看看ajax分页实例：

size变量是每页记录显示最大值；callback函数返回cfg是一个object，cfg.curr即当前页，通过它去请求相关数据。返回ini是个数字，等于1即第一次执行。

<!DOCTYPE html>
<head>
    <script id="myTemp" type="text/html"    >
            <li>名称：{Name}，用户名：{LoginID}</li>
    </script>
    <script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init2" ></script>
</head>
<body>
    <ul id="ul2"    ></ul>
    <span class="leaf" data-options="{
            size: 2
            , callback: function (cfg, ini) {
                $.ajaxSettings.async = false;
                $.getJSON('./lib/company.json').done(function (data) {
                    if (ini == 1) {
                        cfg.total = data.total;
                    }
                    $('#ul2').html('');
                    var start = (cfg.curr - 1) * cfg.size;
                    var end = Math.min(cfg.curr * cfg.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]; });
                        $('#ul2').append(tmp);
                    }
                });
                $.ajaxSettings.async = true;
            }
        }"  >
        </span>
</body>
</html>

在需要显示分页按钮的html标签设置类选择器 leaf 。注意data-options这个配置信息属性，这里插件内部使用了metadata，把每页显示记录数和分页事件函数全部放在html标签的data-options属性里。
上面代码还可以写的更干净些，如下：

<!DOCTYPE html>
<head>
    <script id="myTemp" type="text/html"    >
            <li>名称：{Name}，用户名：{LoginID}</li>
    </script>
    <script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init,app/ajax" ></script>
</head>
<body>
    <ul id="content"    ></ul>
    <span class="leaf" data-options="{ size: 2 , callback: pageCallback }"  ></span>
</body>
</html>

多出一个ajax.js ，位于同级目录下的app文件夹。将data-main="app/init2" 改成 data-main="app/init2,app/ajax"。
ajax.js 内容：

var pageCallback = function (cfg, ini) {
    $.ajaxSettings.async = false;
    $.getJSON('./lib/company.json').done(function (data) {
        if (ini == 1) {
            cfg.total = data.total;
        }
        $('#content').html('');
        var start = (cfg.curr - 1) * cfg.size;
        var end = Math.min(cfg.curr * cfg.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]; });
            $('#content').append(tmp);
        }
    });
    $.ajaxSettings.async = true;
}

注释：html调用脚本asaid这个模块化库文件；这库文件是调用当前页面实际功能的包装，是鄙人受当下流行requirejs之类的影响，山寨出来的脚本，相当简单到没技术含量。
接着讲，比如这个init2.js

define(function (require) { 
    require("jquery.leaf.css");
    require("jquery-1.10.2.min");
    require("jquery.metadata");
    require("jquery.leaf-5.0.2");
});
/*
init2.js 就象下面代码的作用
<link href="lib/jquery.leaf.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<script src="lib/jquery.leaf-5.0.2.js" type="text/javascript"></script>
*/

url分页实例：
关键代码在urlPaging.js，其他是常规模样。

<!DOCTYPE html>
<head>
    <script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init2,app/urlPaging"></script>
</head>
<body>
    <span class="leaf" data-options="{ total: 1999, callback: pageCallback }"></span>
</body>
</html>

以下代码作用等同，是原始模式。

<!DOCTYPE html>
<head>
    <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="lib/jquery.metadata.js" type="text/javascript"></script>
    <link href="lib/jquery.leaf.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery.leaf-5.0.2.js" type="text/javascript"></script>
    <script src="lib/app/urlPaging.js" type="text/javascript"></script>
</head>
<body>
    <span class="leaf" data-options="{ total: 1999, callback: pageCallback }"></span>
</body>
</html>

urlPaging.js 内容：

var pageCallback = function (c, t, size) {
    var href = window.location.href, s = window.location.search, reg = /(&?)page=(\d+)/;
    if (!t) {
        var char = s == '' ? '?' : '&';
        if (reg.test(href)) {
            href = href.replace(reg, char + 'page=' + c.curr);
        } else {
            href += char + 'page=' + c.curr;
        }
        window.location.href = href.replace('?&', '?');
    } else {
        var page = s.match(reg); c.curr = page ? page[2] : 1;
    }
}

DIY分页按钮实例：

声明方式设置：data-options="{total: 299,
leafInfo:'{firstPrev}{moreNum}{nextLast}'}" ...

<!DOCTYPE html>
<head>
    <script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init2" ></script>
</head>
<body>
    <span class="leaf" data-options="{total: 299,leafInfo: '{firstPrev}{moreNum}{nextLast}'}">
    </span>
</body>
</html>

下载地址：
http://download.csdn.net/detail/chinet_bridge/8907085
服务端控件封装分页插件
http://download.csdn.net/detail/chinet_bridge/9120901

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航