应用技术点：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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】