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. [2018HN省队集训D9T1] circle

    [2018HN省队集训D9T1] circle 题意 给定一个 \(n\) 个点的竞赛图并在其中钦定了 \(k\) 个点, 数据保证删去钦定的 \(k\) 个点后这个图没有环. 问在不删去钦定的这 \ ...

  2. document.getElementByClassName的兼容问题

    if(!document.getElementsByClassName){ document.getElementsByClassName = function(className, element) ...

  3. [Python] 启动 uiautomatorviewer2之后,连接成功后重新 reload画面时提示 ('Connection aborted.', error(10054, ''))

    [问题] 出现该问题不管是重启手机还是启动手机里面 uiautomator的服务,都无济于事,只有通过下面方法进行重新初使化方能解决问题 [解决方法] 在命令窗口执行如下命令 python -m ui ...

  4. 原生JS简单的无缝自动轮播

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...

  5. python spawnv用法

    test.py import os import string def run(program, *args): file = program result = os.spawnv(os.P_WAIT ...

  6. Kubernetes1.91(K8s)安装部署过程(一)--证书安装

    安装前忠告:如果你用的是虚拟机,强烈不建议你使用克隆(链接克隆)的方式,至于完整克隆不知道有没有问题,每一台全新安装centos7系统最好. 一.安装前主题环境准备 1.docker安装 建议使用官网 ...

  7. nginx下No input file specified错误的解决

    在web服务的根目录下创建 .htaccess文件,设置一下内容: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond % ...

  8. Kubernetes哪一点最打动你?或者,它发布过的哪一项特性让你认为最厉害?

    kubernates 打动我的地方应该是他解决了docker 的一个痛点,各个docker之间的通信以及集成管理.因为这跟微服务很像,微服务之间也是需要通信和统一管理.知识总是相同的,在这里就体现出来 ...

  9. “System.Reflection.AmbiguousMatchException”类型的异常在 mscorlib.dll 中发生

    错误提示: “System.Reflection.AmbiguousMatchException”类型的异常在 mscorlib.dll 中发生,但未在用户代码中进行处理. 发现不明确的匹配. 问题原 ...

  10. 将EF项目从dbfirst转化为codefirst

    一个脚本服务的项目,之前是先设计的数据库表,采用EF的dbfirst做的映射.项目完成后,出现迁移瓶颈. 1.dbfirst项目,如果数据库表结构做了调整,需要重新映射 2.当出现表结构一致,但数据库 ...