使用jQuery的分页插件jquery.pagination.js进行分页
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进行分页的更多相关文章
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- angular分页插件tm.pagination 解决触发二次请求的问题
angular分页插件tm.pagination(解决触发二次请求的问题) DEMO: http://jqvue.com/demo/tm.pagination/index.html#?current ...
- 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法
spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...
- 分页插件 jquery.pagination.js
引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...
随机推荐
- 【12】python 栈型数据结构模拟、队列型数据结构模拟
一.压栈操作模拟 #__author:"吉*佳" #date: 2018/10/21 0021 #function:栈 # 栈:即是先进后出的一种数据结构 # (1)模拟压栈操作 ...
- beta冲刺————第五天(5/5=1)
今天的主要内容是前后端的对接: 通过前几天的对接,我们发现后端传给前端内容是可以很完美的显示出来的,说明文章格式以及一些默认规则都是OK的. 然后就是前端从云服务器上面接受到文章的具体内容,在这一个环 ...
- Idea2018版本建的项目总是找不到主类
最近更新idea到2018,总是遇见无法加载到主类,刚开始以为是装的过程有什么搞错了,但重装好几遍都是,换成2017又恢复正常,最后发现聪明的同学找到了个偏门可以解决. 那就是先创建文件夹,然后在创建 ...
- MySql详解(二)
MySql的安装和使用安装过程可以自行百度,非常简单,一直下一步就行,这里省略. 启动和停止MySql服务:• 方式一:通过计算机管理方式右击计算机—管理—服务—启动或停止MySQL服务• 方式二:通 ...
- python difflib.md
difflib 此模块提供了用于比较序列的类和函数.它可以用于例如比较文件,并且可以产生各种格式的差异信息,包括HTML和上下文以及统一差异. difflib 模块包含用于计算和处理序列间差异的工具. ...
- CF558E A Simple Task
题目大意: 给定一个长度不超过10^5的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终的字符串 首 ...
- Kafka学习之路 (四)Kafka的安装
一.下载 下载地址: http://kafka.apache.org/downloads.html http://mirrors.hust.edu.cn/apache/ 二.安装前提(zookeepe ...
- 20165302 程上杰 Exp1 PC平台逆向破解
实验内容 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的Bof漏洞,构造一个攻击输入字符串,覆盖返回地址,触发getShell函数. 注入一个自己制作的she ...
- leetcode88—Merge Sorted Array
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: T ...
- P1341 无序字母对
题目描述 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. 输入输出格式 输入格式: 第一行输入一 ...