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

        $.jqPaginator('#pagination1', {

            totalPages: ,

            visiblePages: ,

            currentPage: ,

            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:  },

                    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>

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. How to Pronounce the Numbers 1 – 10

    How to Pronounce the Numbers 1 – 10 Share Tweet Share Tagged With: Numbers Numbers are something you ...

  2. spring boot 程序打jar包及运行

  3. hasattr() getattr() setattr() 函数使用方法

    1. hasattr(object, name) 判断object对象中是否存在name属性,当然对于python的对象而言,属性包含变量和方法:有则返回True,没有则返回False:需要注意的是n ...

  4. 删除kafka topic

    1.因为项目原因,kakfa通道中经常造成数据阻塞,导致kafka通道中数据量过大,因此我需要将kakfa通道中数据清除(个人项目原因,一直使用一个消费者,只要保证当前消费者不在消费之前很久的数据就可 ...

  5. php输出textarea数据（入库没有处理的）

    str_replace("\r\n","<br />",$xmactivity['xmdetail']) 导出excel换行方法 str_repla ...

  6. 支付宝支付Java代码

    支付宝调用流程 开发前的准备工作 配置应用网关 应用网关里面填写的值就是商户后台的异步回调地址.也就是在支付宝付完款之后,由支付宝调用商户,便于商户验证订单各信息和更新订单状态 授权回调地址 授权回调 ...

  7. matlab stereo_gui立体标定

    http://www.vision.caltech.edu/bouguetj/calib_doc/index.html#examples 文档中举了几个例子,有关双目的是第5个, 这个例子展示了如何使 ...

  8. 使用Js控制ReactRouter路由

    [使用Js控制ReactRouter路由] 首先引入PropTypes: const PropTypes = require('prop-types'); 然后定义context的router属性: ...

  9. new.target

    [new.target] The new.target property lets you detect whether a function or constructor was called us ...

  10. android显示和隐藏软键盘（转）

    显示键盘: EditText editText.setFocusable(true); editText.setFocusableInTouchMode(true); editText.request ...