jquery Pagination.js 实现分页程序

因为项目需要，在表格显示的情况中需要使用分页功能，找了很多js的插件，最后找到Jquery.pagination.js，简单记录下使用方法，以备以后使用：

一、引入js文件，引入jquery.js和jquery.pagination.js文件

这个就不赘述了，使用任何jquery插件都是先引入jquery.js然后引入jquery.pagination.js文件。

二、javascript代码：

function getPage(curPage){
$.ajax({
url:'api.php',
type:'POST',
dataType: 'json',
data:{curPage:curPage},
success:function(data){
fill_table(data);
},
error:function(data){
console.info(data);
}
});
}
function fill_table(json_data){
if(json_data.data.length < 20){
var html = '';
var newAndUpdate = 0;
$.each(json_data.data,function(i,content){
html += ""//处理渲染数据;
})
$("#expirednum_list").html(html);
$(".pagination").html('');
}else{
console.info(json_data);
function pageselectCallback(page_index, jq){
// Get number of elements per pagionation page from form
/* var items_per_page = 20;
var max_elem = Math.min((page_index+1) * items_per_page, json_data.data.length);

var newAndUpdate = 0;
*/
$("#list").html('');
var newcontent = '';
var json_data = null;
$.ajax({
url:'api.php',
type:'POST',
dataType: 'json',
async:false,
data:{curPage:page_index},
success:function(data){
json_data = data;
},
error:function(data){
console.info(data);
}
});
// Iterate through a selection of the content and build an HTML string
$.each(json_data.data,function(i,n)
{
newcontent += ""//处理渲染数据
;
});
console.info(json_data);
// Replace old content with new content
$("#list").html(newcontent);
// Prevent click eventpropagation
return false;
}

function getOptionsFromForm(){
var opt = {callback: pageselectCallback};
opt['items_per_page'] = 20;
opt['num_display_entries'] = 4;
opt['num_edge_entries'] = 2;
opt['prev_text'] = '上一页';
opt['next_text'] = '下一页';
return opt;
}
var optInit = getOptionsFromForm();
$(".pagination").pagination(json_data.length, optInit);
}

}   //默认调用获取第一页
使用getPage(1)

三、后端处理

后端只要处理传过来的curPage的当前页就可以了。。。查询时使用 limit $offset,$pageSize 就可以得到翻页的数据内容了。