jqPaginator分页（每次只取一页数据）

应用技术点：jqPaginator、template7、bootstrap.css

参考网址：

jqPaginator：http://jqpaginator.keenwon.com/#a3

template7：http://idangero.us/template7/#.Wm6t1fmWaUk

template7：https://www.cnblogs.com/xsj1989/p/5603685.html

其中请求数据的地址：Handlers/Handler1.ashx返回的数据是（根据自己的情况制定返回数据格式）：{"Data":[{"ID":1,"Name":"小红帽与大灰狼"},{"ID":2,"Name":"绿野仙踪"}],"PageIndex":1,"PageCount":9,"RecordCount":18}

代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jqPaginator</title>
    <link href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jqPaginator.js"></script>
    <script src="js/template7.min.js"></script>
</head>
<body style="padding:10px;">
    <div id="content">
    </div>
    <ul class="pagination" id="pagination1"></ul>

    <script type="text/javascript">
        var pcount = 1;
        $.jqPaginator('#pagination1', {
            totalPages: 10,
            visiblePages: 10,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            last: '<li class="last"><a href="javascript:;">尾页</a></li>',
            prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (num, type) {

                $.ajax({
                    type: "GET",
                    url: "Handlers/Handler1.ashx",
                    data: { PageIndex: num, PageSize: 2 },
                    success: function (result) {

                        var data = $.parseJSON(result);
                        pcount = data.PageCount;

                        $('#pagination2').jqPaginator('option', {
                            totalPages: pcount
                        });

                        //获取模板
                        var template1 = $('#list1').html();
                        // 编译模板
                        var compiledTemplate1 = Template7.compile(template1);
                        // 使用模板加载数据
                        var htmlStr = compiledTemplate1(data.Data);
                        //将得到的结果输出到指定区域
                        $("#content").html(htmlStr);

                    }
                });

            }
        });
    </script>

    <script type="text/template7" id="list1">
        <ul>
            {{#each this}}
            <li>{{ID}}:{{Name}}</li>
            {{/each}}
        </ul>
    </script>

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xsj1989/p/8376818.html