应用技术点：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. ubuntu 该软件包现在的状态极为不妥 error

    rm -rf /var/lib/dpkg/info/yourerrorsofware* dpkg --remove --force-remove-reinstreq yourerrorsoftware ...

  2. Redis进阶实践之六Redis Desktop Manager连接Windows和Linux系统上的Redis服务（转载6）

    Redis进阶实践之六Redis Desktop Manager连接Windows和Linux系统上的Redis服务 一.引言 今天本来没有打算写这篇文章,但是,今天测试Redis的时候发现了两个问题 ...

  3. 如何使用JDBC查询所有记录

    public class JdbcDao {    private Connection conn=null;   //数据库连接对象    private String strSql=null; / ...

  4. Android DevArt4：IntentFilter学习及深入~问题描述：在不指定具体action前提下，如果有两个以上的Activity，具有完全相同的intent-filter，项目同步是否会出现异常？程序运行是否会崩溃？

    概述:GitHub IntentFilter意图过滤器,三种匹配规则:action.category.data 重点:过滤规则中必须设置 '<category android:name=&quo ...

  5. UITableView性能的优化（）

    1.0 使用不透明视图 不透明的视图可以极大地提高渲染的速度. 2.0 不要重复创建不必要的cell 也就是我们常说的 循环利用机制 (建立缓冲池) 3.0  减少视图的数目 4.0  不要做多余的绘 ...

  6. Python 如何创建2维空数组

    http://blog.csdn.net/yockie/article/details/46127829 myList = [ ( [0] * 3 ) for i in range(4) ] > ...

  7. js基础-单体对象日期对象

    Math对象 全局对象 日期对象 var t = new Date() t.toLocaleDateString(); t.getFullYear(); t.getMonth() + 1 t.getD ...

  8. 用伪类:after画箭头

    在项目中,经常会用到尖头,尤其是表单中,会有剪头的样式,尽量不要用图片显示.用伪类实现. eg   查看更多 > html: <div class="more"> ...

  9. node.js fs、http使用

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

  10. vl_sift函数用法

    I = vl_impattern('roofs1') ; image(I) ; %vl_sift函数的输入是一个单精度的灰度图像,灰度值区间归一化到[, ]. %因此图像 I 需要通过下面的函数转成相 ...