应用技术点：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. sass实战演练01 - 外部文件引用和变量

    SASS是什么? 目前前端开发中css已经是公认的”前端程序员必须掌握”的知识,最早的css编写都是手工一条条写出来的,工作量大.不利于维护. 而sass的存在使得css开发可以像写代码一样最终生成一 ...

  2. [PHP]防止表单重复提交的几种方法

    --------------------------------------------------------------------------------------------------- ...

  3. Python模块和类.md

    模块的定义 代码的层次结构 对于python的层次结构一般为包->模块 包也就是文件夹,但是文件夹下必须有文件"init.py"那么此文件夹才可以被识别为包."in ...

  4. C# 基础 new 、override实现多台区别

    一.new只是隐藏父类中的同名方法.基类和父类中都存在这个方法. namespace ConsoleApplication1 { class Program { static void Main(st ...

  5. java 开学第四周

    package english; import java.io.File; import java.util.Scanner; import java.io.FileNotFoundException ...

  6. c 语言的复杂声明

    简化的声明语法: dcl: optional *'s direct-dcl direct-dcl: name (dcl)  direct-dcl() direct-dcl[optional size] ...

  7. CSS 点击图片替换样式

    1 <ul id="u1"> <li class="sea one show1">海运</li> <li class= ...

  8. Java中的冒泡排序和选择排序

    //冒泡排序 public class Test5 { public static void main(String[] args) { int[] arr = {12,2,25,89,5}; bub ...

  9. Archlinux 遇到的坑

    1.系统更新之后pip炸了,解决方案是用官方的get-pip安装,同时配置文件,避免使用sudo安装 2.grub不如syslinux配置快捷,入了syslinux的坑 3.平铺式桌面搭配快捷键,Hi ...

  10. hbase 定时备份

    #!/bin/bash#su - hdfs <<EOFdata1=`date "+%Y%m%d%H%M%S"`data2="/user/news/hbase_ ...