应用技术点: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. Linux磁盘空间不足处理方法

    维护Linux服务器正常使用需要经常删除Linux系统运行产生的系统日志和业务环境产生的debug日志文件.安装包等.本文主要描述如何通过脚本实现清理业务环境产生的 debug日志文件和上传或备份的打 ...

  2. 8张思维导图学习javascript

    分别归类为: javascript变量 javascript运算符 javascript数组 javascript流程语句 javascript字符串函数 javascript函数基础 javascr ...

  3. 封装jQuery下载文件组件

    使用jQuery导出文档文件 jQuery添加download组件 jQuery.download = function(url, data, method){ if( url && ...

  4. javascript 模拟java 实现继承的5种方式

    1.继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(t ...

  5. RabbitMQ、Memcached、SQLAlchemy

    一.RabbitMQ 1.基础概念 rabbitMQ说白了就是一个消息队列,类似于Queue,也是生产者与消费者模型.只不过做了扩展,所不同的是Queue在内存中的消息队列,而RabbitMQ是部署在 ...

  6. h5做列表 水平分割

    移动端H5各种各样的列表的制作方法(三) by FungLeo 移动端H5各种各样的列表的制作方法(三) by FungLeo 前情回顾 在上一篇博文<移动端各种各样的列表的制作方法(二)> ...

  7. webui-popover 一个轻量级的jquery弹出层插件

    该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css  js  文件 <link rel="s ...

  8. Java虚拟机1

    Java内存区域 程序计数器(Program Counter Register):记录当前线程所执行字节码的行号指示器.字节码解释器工作时,判断是循环,分支,跳转,异常等条件,然后更新这个计数器的值来 ...

  9. SQLMAP自动注入(三):参数介绍

    --delay延时扫描 --scope 从burpsuit日志中过滤日志内容,通过正则表达式筛选扫描目标,19开头,尾数为1.11.121.221的目标 --level=3 会检查user-agent ...

  10. php中in_array一些问题

    var_dump(in_array(1,['s','1fsdf',12])); // true var_dump(in_array(0,[4,'erdd']));  // true 因为是要用值与数组 ...