应用技术点：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. SQL 语句 写法

    SELECT * FROM article where  userid=4 order by sort asc LIMIT 0,10; 先根据写where 条件,再排序,在LIMIT.

  2. C#格式化数值结果表(格式化字符串)

    字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) $2.000 D 十进制 string.Format("{0:D3}", ...

  3. SQLServer 的数据分页:

    假设现在有这样的一张表:CREATE TABLE test( id int primary key not null identity, names varchar(20))然后向里面插入大约1000 ...

  4. 18. socket io

    类似dataservice 我们socket io 和后端交互 我们也可以做成专门的service 我们先引入 为什么不是cdn呢? 因为client就是从我们的server端拿到的socket.io ...

  5. nyoj17-单调递增最长子序列-（dp）

    17-单调递增最长子序列 内存限制:64MB 时间限制:3000ms 特判: No通过数:125 提交数:259 难度:4 题目描述: 求一个字符串的最长递增子序列的长度如:dabdbf最长递增子序列 ...

  6. 最小生成树一·Prim算法

    描述 最近,小Hi很喜欢玩的一款游戏模拟城市开放出了新Mod,在这个Mod中,玩家可以拥有不止一个城市了! 但是,问题也接踵而来——小Hi现在手上拥有N座城市,且已知这N座城市中任意两座城市之间建造道 ...

  7. 部署Java的运行环境

    1.先去官网下载最新的jdk 网址:http://www.oracle.com/technetwork/java/javase/downloads/ 2.用tar zxvf解压相应的文档到相应的路径 ...

  8. Physical (Raw) Versus Logical Backups

    [Physical (Raw) Versus Logical Backups] Physical backups consist of raw copies of the directories an ...

  9. metasploit framework（十五）：弱点扫描

    openvas扫描生成NBE格式的日志 改个比较好记的文件名 将日志导入到msf进行后续操作,导入之前查看一下hosts和services 导入nbe格式的文件 查看漏洞弱点 msf直接调用nessu ...

  10. Jmeter学习（三十二）调试工具Debug Sampler（转载）

    转载自 http://www.cnblogs.com/yangxia-test 一.Debug Sampler介绍: 使用Jmeter开发脚本时,难免需要调试,这时可以使用Jmeter的Debug S ...