应用技术点：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. 解决运行wamp提示“MSVCR110.dll”丢失的问题！

    我在Windows系统上安装wampserver2.5 64位,安装到最后,总是提示丢失msvcr110.dll 解决办法: 到这个网站下载一个Visual C++ Redistributable f ...

  2. 3dmax快捷键

    P 透视图 F前视图 L 左视图 T 顶视图 B 底视图单窗口与四窗口的切换快捷键是 alt+w 渲染快捷键 shilf+q 独立 快捷键 alt+q 自己多记点快捷键哦!!!!3DMAX2009快捷 ...

  3. servlet、servlet容器和web应用程序的关系

  4. pycharm 的包路径设置export PYTHONPATH=$PYTHONPATH

    我们使用pycharm的时候,经常会因为要链接(import)其他自己写的包,因此在pycharm的时候经常会 报错,就是找不到自己的包,在命令行下常用,export PYTHONPATH=$PYTH ...

  5. CSS 原理

    CSS是一个描述HTML文档的样式语言. CSS描述HTML元素的显示方式. 本教程将教你CSS从基础到网页布局,学完本教程,可以设计出漂亮的网站. 本教程需要HTML知识为基础,学习HTML前往&l ...

  6. js基础-函数基础

    js 先对函数进行解析 然后在执行函数 定义一个函数 实现求两个数的乘 function mult(a,b){ return a*b; } mult(1,3) 计算1 - n 的和 封装成函数 fun ...

  7. jquery 获取表单的用户输入值的方法

    以前的表单中的select input textarea的用户选择输入是通过jQuery的val()方法获取到的,在三一Java前端大拿教我了一个方法可以不用那么麻烦获取数据,只要在这些表单元素上加n ...

  8. php页面开启错误提示

    ini_set("display_errors", "On"); error_reporting(E_ALL | E_STRICT);

  9. zookeeper 集群配置采坑 Connection refused WARN [QuorumPeer[myid=1]/0:0:0:0:0:0:0:0:2181:QuorumCnxManager@584] - Cannot open channel to 3 at election address slave2/192.168.127.133:3888

    坑一: Cannot open channel to at election address slave1/ java.net.ConnectException: Connection refused ...

  10. 大数据入门到精通4--spark的rdd的map使用方式

    学习了之前的rdd的filter以后,这次来讲spark的map方式 1.获得文件 val collegesRdd= sc.textFile("/user/hdfs/CollegeNavig ...