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

代码：

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>jqPaginator</title>
  6.     <link href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
  7.     <script src="js/jquery-3.2.1.min.js"></script>
  8.     <script src="js/jqPaginator.js"></script>
  9.     <script src="js/template7.min.js"></script>
  10. </head>
  11. <body style="padding:10px;">
  12.     <div id="content">
  13.     </div>
  14.     <ul class="pagination" id="pagination1"></ul>
  15.  
  16.     <script type="text/javascript">
  17.         var pcount = ;
  18.         $.jqPaginator('#pagination1', {
  19.             totalPages: ,
  20.             visiblePages: ,
  21.             currentPage: ,
  22.             first: '<li class="first"><a href="javascript:;">首页</a></li>',
  23.             last: '<li class="last"><a href="javascript:;">尾页</a></li>',
  24.             prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
  25.             next: '<li class="next"><a href="javascript:;">下一页</a></li>',
  26.             page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
  27.             onPageChange: function (num, type) {
  28.  
  29.                 $.ajax({
  30.                     type: "GET",
  31.                     url: "Handlers/Handler1.ashx",
  32.                     data: { PageIndex: num, PageSize:  },
  33.                     success: function (result) {
  34.  
  35.                         var data = $.parseJSON(result);
  36.                         pcount = data.PageCount;
  37.  
  38.                         $('#pagination2').jqPaginator('option', {
  39.                             totalPages: pcount
  40.                         });
  41.  
  42.                         //获取模板
  43.                         var template1 = $('#list1').html();
  44.                         // 编译模板
  45.                         var compiledTemplate1 = Template7.compile(template1);
  46.                         // 使用模板加载数据
  47.                         var htmlStr = compiledTemplate1(data.Data);
  48.                         //将得到的结果输出到指定区域
  49.                         $("#content").html(htmlStr);
  50.  
  51.                     }
  52.                 });
  53.  
  54.             }
  55.         });
  56.     </script>
  57.  
  58.     <script type="text/template7" id="list1">
  59.         <ul>
  60.             {{#each this}}
  61.             <li>{{ID}}:{{Name}}</li>
  62.             {{/each}}
  63.         </ul>
  64.     </script>
  65.  
  66. </body>
  67. </html>

jqPaginator分页（每次只取一页数据）的更多相关文章

  1. Scrapy 实现爬取多页数据 + 多层url数据爬取

    项目需求:爬取https://www.4567tv.tv/frim/index1.html网站前三页的电影名称和电影的导演名称 项目分析:电影名称在初次发的url返回的response中可以获取,可以 ...

  2. sql根据某一个字段重复只取第一条数据

    比如上图,取3,4行记录的第一行也就是3行,而不返回4行. 使用分析函数row_number() over (partiion by ... order by ...)来进行分组编号,然后取分组标号值 ...

  3. JS实现数组每次只显示5条数据

    var array = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; //循环样式结构function fun(arr,index){ var str = &qu ...

  4. postgresql-分页数据重复问题探索

    postgresql-分页数据重复探索 问题背景 许多开发和测试人员都可能遇到过列表的数据翻下一页的时候显示了上一页的数据,也就是翻页会有重复的数据. 如何处理? 这个问题出现的原因是因为选择的排序字 ...

  5. Scrapy 通过登录的方式爬取豆瓣影评数据

    Scrapy 通过登录的方式爬取豆瓣影评数据 爬虫 Scrapy 豆瓣 Fly 由于需要爬取影评数据在来做分析,就选择了豆瓣影评来抓取数据,工具使用的是Scrapy工具来实现.scrapy工具使用起来 ...

  6. oracle 根据字段分组取第一条数据及rank函数说明

    当前有这样一个需求,根据外键对子表数据进行分组,取每组中的一条数据就行了,如图: 如:COMMANDID = 26的有两条,只取一条数据. sql语句: select * from(select SY ...

  7. 【asp.net爬虫】asp.NET分页控件抓取第n页数据 javascript:__doPostBack

    最近在模拟HTTP请求抓取数据,但是服务器是asp.net开发的 分页控件代码 <tr> <td align="left">共&nbsp210&am ...

  8. thinkphp5 列表页数据分页查询-带搜索条件

    一.控制器部分 <?php namespace app\user\controller; use app\user\model\HelpCenterManual as HelpCenterMan ...

  9. python实现一个栏目的分页抓取列表页抓取

    python实现一个栏目的分页抓取列表页抓取 #!/usr/bin/env python # coding=utf-8 import requests from bs4 import Beautifu ...

随机推荐

  1. codes often WA

    枚举: 1.完美立方 #include<iostream> #include <cstdio> using namespace std; int main() { int N; ...

  2. SqlServer 中 for xml path 相关

    表结构: typename varchar(50) typedesc varchar(50) 示例 SQL 语句: SELECT '{"'+TypeName, '":"' ...

  3. asp.net中处理程序调用HttpContext.Current.Session获取值出错

    asp.net中处理程序调用System.Web.HttpContext.Current.Session获取Session时提示错误:未将对象引用设置到对象的实例. 解决办法:在处理程序文件类中实现I ...

  4. JAVA语言 第二周

    放假第二周了,时间真快! 上一周配置好了环境变量,这一周就可以做一些测试了.对不同的内容分类进行了测试,包括写入.输出.变量·······还有很多.对于开学的试卷,在第一部分做的还行,第二部分就没什么 ...

  5. node.js fs、http使用

    学习node核心模块http.fs;的使用 首先在server.js文件中require两个模块http.fs; let fs = require('fs')let http = require (' ...

  6. 用js实现九九乘法口诀两种方式

    js实现九九乘法口诀两种方式: 第一种是用户输入一个数弹出所对应的乘法口诀: <script type="text/javascript"> function art( ...

  7. target=_blank攻击

    [target=_blank攻击] 在<a>标签中加入 rel="noopener noreferrer" 来避免. 参考:https://mathiasbynens. ...

  8. msf客户端渗透（二）：PDF漏洞、恶意网站、flash漏洞、IE漏洞、java漏洞、android漏洞、VBScript感染payload

    这个漏洞利用只在XP上有效 利用pdf漏洞利用payload exploit生成一个pdf文件 传到被攻击机上 启动msf侦听 exploit -j XP上双击运行这个pdf时,kali获取到一个sh ...

  9. EVIL TWIN AP

    git clone https://github.com/P0cL4bs/3vilTwinAttacker.git cd 3vilTwinAttacker/ ./installer.sh --inst ...

  10. CSS 变量教程

    一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:-- ...