应用技术点：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>