最近使用分页这个基础效果较为频繁,而项目前端页面使用的是纯静态的HTML,自己之前写的JSP中的分页就用不成了;项目中也引入了Bootstrap,本来想使用Bootstrap中的分页样式,但发现其样式与这个项目的风格太不搭,再去修改其样式,还要控制其页码控制首页和末页不能再点击上一页和下一页,再麻烦了,索性就使用这个jQuery的分页插件配合着ajax来实现,使用过后感觉还不错。

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" href="pagination.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagination.js"></script>

这个CSS文件就是jQuery Pagination Plugin 的样式文件,修改其样式还是挺简单的,在这个文件里直接改就行了,因为我现在做的这个项目的界面风格很奇怪,所以我就在这里修改让分页插件的样式与项目统一,修改起来并不是太难,class名也可以见名知意。

这里再提示一下插件的js文件引用一定要放在jQuery的js文件后面

2、在head标签中加入以下js代码

      function showPage(total,pageSize){
//分页
$('#news-Pagination-1').pagination(total, { //总记录数
items_per_page:pageSize, //每页显示多少条记录
next_text:'下一页',
prev_text:'上一页',
num_edge_entries:2, //连接分页主体的条数
callback:handlePaginationClick
}); }
function handlePaginationClick(new_page_index, pagination_container) {
//清除之前的数据
$('div[class=b3-third-one-today-right]').children().empty();
show68(show68_pageSize,new_page_index+1);
return false;
}

show68 是我写的一个Ajax方法,需要改成项目实际需要的Ajax请求方法

在show68中最后一句需要在第一次使用时调用 showPage:

var j=1;

------------------

if(j==1){
//第一次调用
j++;
showPage(data.total,pageSize);
}

参数配置:

total 总记录数

items_per_page 每页记录数(就是pageSize)

num_display_entries 最多显示的页码数 
next_text ‘下一页’显示的文字 
next_show_always 如果设置为false‘下一页’按钮只有在还能增加页码的情况下才显示 默认 true
prev_show_always 如果设置为false‘上一页’按钮只有在还能导航到前一页的情况下才显示 默认 true
prev_text ‘上一页’显示的文字

还有更多配置项可以查看  https://github.com/gbirke/jquery_pagination

总来说该插件只需传给它总记录数和每页显示的大小这两个参数即可。

注意:new_page_index这个参数对应的就是当前页,不需要我们去指点当前是那一页,但是其值使用从0开始的(当前页码-1),后台我们的分页方法一般是对应当前的页码的,所以传给后台需要+1。

callback的值是说明回调函数是哪个,我们可以在这个回调函数中去调用分页的ajax,这样效果就是每点击一页,就会去请求后台,是一次其实也不局限于一定要在回调函数中使用ajax,例如我遇到一个特别奇葩的需求,是一个将所有数据查回来放在js的一个数组中,然后分页就是对这个数组取对应的一个区间的数据,还好这个数据量并不是很大,js有取数组指定一部分数据的方法,所以操作不算难性能也还可以,我就是在这个回调函数中取数组对应一部分的数据。

3、在body标签中加入以下格式的html代码

<div id="news-Pagination-1"></div>

写一个div来存放这个分页工具即可。

最后看一看这个分页工具的效果图,这个默认的效果,就不看我做的项目中的效果了

使用jQuery Pagination Plugin实现分页效果的更多相关文章

  1. jQuery Pagination Plugin ajax分页控件

    <html> <body> <div id="datagrid"> </div> <div id="paginati ...

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

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

  3. jquery自定义插件实现分页效果

    这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

  4. Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用

    在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...

  5. 使用jQuery的分页插件jquery.pagination.js进行分页

    1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...

  6. 5种风格的 jQuery 分页效果【附代码】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. asp.net中应用JQuery.pagination分页

    JQuery.pagination这款分页控件非常好用,可实现无刷新分页,为了方便下次做项目便于拷贝,所以在此发布一下,具体的实现流程如下: 效果图: JQuery.pagination的各个参数的说 ...

  8. js jquery.pagination.js分页

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css( ...

  9. jquery.pagination.js分页

    参数说明 参数名 描述 参数值 maxentries 总条目数                           必选参数,整数 items_per_page 每页显示的条目数            ...

随机推荐

  1. 2017-2018-2 20165202 实验三《敏捷开发与XP实践》实验报告

    一.实验报告封面 二.实验内容 XP基础 XP核心实践 相关工具 三.实验步骤 (一)格式化代码 实验要求: 在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化 ...

  2. MayBatis与Spring的整合

    1. 步骤 第一步:导入相关的jar包(spring和mybatis) mybatis-spring-*.jar spring-jdbc-*.jar spring-tx-*.jar 第二步:sprin ...

  3. IR Cut Filter

    IR cut filter,即红外截止滤光片,它放在于LENS与Sensor之间.因人眼与CMOS Sensor对各波长的响应不同,人眼看不到红外光但sensor会感应,因此需要IR cut filt ...

  4. Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...

  5. XOR Queries(莫队+trie)

    题目链接: XOR Queries 给出一个长度为nn的数组CC,回答mm个形式为(L, R, A, B)(L,R,A,B)的询问,含义为存在多少个不同的数组下标k \in [L, R]k∈[L,R] ...

  6. D3.js 使用心得

    教程 D3.js 入门教程系列 http://www.ourd3js.com/wordpress/296/ 全球地图数据

  7. postfix邮件服务器搭建01-准备篇

    本系列文章主要介绍linux下主流的开源邮件系统postfix的搭建过程,构建一个通过postfix虚拟用户管理的完整的邮件系统, 该系统包括以下组件: 邮件收发端postfix,dovecot, 邮 ...

  8. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  9. 【排序】归并排序,C++实现

    原创文章,转载请注明出处! 博客文章索引地址 博客文章中代码的github地址 # 基本思想(分治法)       归并排序中, “归”代表递归的意思,即递归的将数组通过折半的方式分离为单个数组. “ ...

  10. CocoaPods(pod install一直不动)

    CocoaPods安装和使用教程 如何在Mac 终端升级ruby版本 RubyGems 镜像 cocoapods无法使用(mac os 10.11升级导致pod: command not found)