jq分页 不刷新页面_ajax实现无刷新分页效果

基于jquery.pagination.js实现的无刷新加载分页数据效果。

简介与说明

* 该插件为Ajax分页插件，一次性加载数据，故分页切换时无刷新与延迟。如果数据量较大，加载会比较慢。

* 分页原理：数据总条数/每页显示数=分页总页码

* 修改后，我们不用在第一次请求时将数据一次性加载完，而是按需加载。

简单示例

html

js

$('.page-box').pagination({

totalData:100,

showData:5

coping:true

});

配置信息

API接口

该插件的使用方法网上有很多详细介绍，我就不一一举例描述了。

介绍该插件的原因是我对它做了一些修改。改动不算大，只能说是我用起来比较方便。

改动说明

在页面上放一个隐藏的文本域，用来存放总页数。

1.需要与后端约定好每页显示多少条数据，然后在后端统计总分页数。在前端界面点击分页时，只需要通过ajax传递页码来加载数据。

2.前端也可以自己设置。后端返回数据的总条数，前端可以自己计算总分页数。该方法需要前端向后端发起分页请求时，将每页显示多少条数据作为参数传递给后端。

修改后插件代码

;(function($,window,document,undefined){

//配置参数

var defaults = {

current:1,//当前第几页,默认为第1页

prevCls:'page_prev',//上一页class

nextCls:'page_next',//下一页class

prevContent:'

nextContent:'>',//下一页按钮内容，可更改

activeCls:'active',//当前页选中状态

coping:false,//首页和尾页

homePage:'',//首页节点内容

endPage:'',//尾页节点内容

count:3,//当前页前后分页个数

jump:false,//跳转到指定页数

jumpIptCls:'jump-ipt',//文本框内容

jumpBtnCls:'jump-btn',//跳转按钮