1,需要用到jquery.pagination.js和pagination.css

https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w

https://pan.baidu.com/s/1KvutZaTa21xW-JZsKNb4lQ

2,分页的js代码如下

var pageNum = 1;
var pageSize = 10;
//查询列表数据
function searchList() {
loadingFlag = true
$.ajax({
url:"searchListData",
type:"post",
data:{
name : "name"
loadingFlag : false
},
dataType: "json",
success:function(obj){
if (obj.code = 101){
$(".search-total span").html(obj.data.total);
$(".data-list-total strong").html(obj.data.total);
//展示列表信息
showSearchResult(obj.data.resultList);
//展示分页信息
showPage(obj.data.total,pageSize,pageNum);
}
}
})
//loading动画
if(loadingFlag){
var spanT = '<div style=\'width:400px;height:450px;margin: 100px auto;\'>\n' +
'<img src=\'images/loading.gif\' style=\'width:400px;height:400px;\'>\n' +
'</div>';
$("#content").empty();
$('#content').append(spanT)
}
} //分页
function showPage(total, pageSize, pageNum) {
$(".navigation").empty();
var pageHtml = '<div class="pagination my-pagination" style="margin-right: 2%;float: right;">';
pageHtml += '<div class="M-box"></div>';
pageHtml += '<div class="tips">当前是第<span class="now">'+pageNum+'</span>页,总共<span class="totalPage"></span>页,总共<span class="count"></span>条数据</div>';
pageHtml += '</div>';
$(".navigation").append(pageHtml); var totalPage = Math.ceil(total / pageSize);
$('.totalPage').text(totalPage);
$('.count').text(total);
$('.M-box').pagination({
pageCount: totalPage,
current:pageNum,//当前第几页
jump: false,
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
callback:PageListClick
});
}
//分页的回调函数
function PageListClick(page_index){
$('.now').text(page_index.getCurrent());
pageNum = page_index.getCurrent();
searchList();//点击分页加载列表数据 */
}

使用jQuery的分页插件jquery.pagination.js进行分页的更多相关文章

  1. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  2. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  3. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  4. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

  5. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  6. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  7. angular分页插件tm.pagination 解决触发二次请求的问题

    angular分页插件tm.pagination(解决触发二次请求的问题) DEMO:  http://jqvue.com/demo/tm.pagination/index.html#?current ...

  8. 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法

    spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...

  9. 分页插件 jquery.pagination.js

    引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...

随机推荐

  1. 【12】python 栈型数据结构模拟、队列型数据结构模拟

    一.压栈操作模拟 #__author:"吉*佳" #date: 2018/10/21 0021 #function:栈 # 栈:即是先进后出的一种数据结构 # (1)模拟压栈操作 ...

  2. beta冲刺————第五天(5/5=1)

    今天的主要内容是前后端的对接: 通过前几天的对接,我们发现后端传给前端内容是可以很完美的显示出来的,说明文章格式以及一些默认规则都是OK的. 然后就是前端从云服务器上面接受到文章的具体内容,在这一个环 ...

  3. Idea2018版本建的项目总是找不到主类

    最近更新idea到2018,总是遇见无法加载到主类,刚开始以为是装的过程有什么搞错了,但重装好几遍都是,换成2017又恢复正常,最后发现聪明的同学找到了个偏门可以解决. 那就是先创建文件夹,然后在创建 ...

  4. MySql详解(二)

    MySql的安装和使用安装过程可以自行百度,非常简单,一直下一步就行,这里省略. 启动和停止MySql服务:• 方式一:通过计算机管理方式右击计算机—管理—服务—启动或停止MySQL服务• 方式二:通 ...

  5. python difflib.md

    difflib 此模块提供了用于比较序列的类和函数.它可以用于例如比较文件,并且可以产生各种格式的差异信息,包括HTML和上下文以及统一差异. difflib 模块包含用于计算和处理序列间差异的工具. ...

  6. CF558E A Simple Task

    题目大意: 给定一个长度不超过10^5的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终的字符串 首 ...

  7. Kafka学习之路 (四)Kafka的安装

    一.下载 下载地址: http://kafka.apache.org/downloads.html http://mirrors.hust.edu.cn/apache/ 二.安装前提(zookeepe ...

  8. 20165302 程上杰 Exp1 PC平台逆向破解

    实验内容 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的Bof漏洞,构造一个攻击输入字符串,覆盖返回地址,触发getShell函数. 注入一个自己制作的she ...

  9. leetcode88—Merge Sorted Array

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: T ...

  10. P1341 无序字母对

    题目描述 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. 输入输出格式 输入格式: 第一行输入一 ...