1、前台使用ajax无刷新分页，主要需要生成分页的工具条，这里使用的是jquery.pagination.js
插件参数可以参考----张龙豪-jquery.pagination.js分页
下面贴出代码
return this.each(function() {
/**
/**
- 计算最大分页显示数目
*/
function numPages() {
return Math.ceil(maxentries/opts.items_per_page);
}
/** - 极端分页的起始和结束点，这取决于current_page 和 num_display_entries.
- @返回 {数组(Array)}
*/
function getInterval() {
var ne_half = Math.ceil(opts.num_display_entries/);
var np = numPages();
var upper_limit = np-opts.num_display_entries;
var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half,upper_limit),):;
var end = current_page>ne_half?Math.min(current_page+ne_half,np):Math.min(opts.num_display_entries,np);
return [start,end];
}
/**
* <a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a><a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>事件处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
* @参数 {int} page_id 为新<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>
*/
function pageSelected(page_id,evt){
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id,panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
/**
* 此<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>将<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a><a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>插入到容器元素中
*/
function drawLinks() {
panel.empty();
var interval = getInterval();
var np = numPages();
// 这个辅助<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>返回一个处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a><a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>有着正确page_id的pageSelected。
var getClickHandler = function(page_id) {
return function(evt){ return pageSelected(page_id,evt); }
}
//辅助<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>用来产生一个单<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>(如果不是当前页则产生span<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>)
var appendItem = function(page_id,appendopts){
page_id = page_id<?:(page_id<np?page_id:np-); // 规范page id值
appendopts = jQuery.extend({text:page_id+,classes:""},appendopts||{});
if(page_id == current_page){
var lnk = jQuery("<a href class='currentPage'>" + (appendopts.text) + "</a>");
}else{
var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
.bind("click",getClickHandler(page_id))
.attr('href',opts.link_to.replace(/__id__/,page_id));
}
if (appendopts.classes) { lnk.addClass(appendopts.classes); }
panel.append(lnk);
}
//产生描述
panel.append("<span>共有 " + maxentries + " 条记录，当前第 @H_<a href="https://www.jb51.cc/tag/404/" target="_blank" class="keywords">404</a>_8@" + (current_page + ) + "</b>/" + np + " 页</span>");
// 产生"Prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>s"-<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
if(opts.prev_text && (current_page > || opts.prev_show_always)){
appendItem(current_page-,{text:opts.prev_text,classes:"prev"});
}
// 产生起始点
if (interval[] > && opts.num_edge_entries > )
{
var end = Math.min(opts.num_edge_entries,interval[]);
for(var i=; i<end; i++) {
appendItem(i);
}
if(opts.num_edge_entries < interval[] && opts.ellipse_text)
{
jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
}
}
// 产生内部的些<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
for(var i=interval[]; i<interval[]; i++) {
appendItem(i);
}
// 产生结束点
if (interval[] < np && opts.num_edge_entries > )
{
if(np-opts.num_edge_entries > interval[]&& opts.ellipse_text)
{
jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
}
var begin = Math.max(np-opts.num_edge_entries,interval[]);
for(var i=begin; i<np; i++) {
appendItem(i);
}
}
// 产生 "Next"-<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
if(opts.next_text && (current_page < np- || opts.next_show_always)){
appendItem(current_page+,{text:opts.next_text,classes:"next"});
}
}
//从选项中<a href="https://www.jb51.cc/tag/tiqu/" target="_blank" class="keywords">提取</a>current_page
var current_page = opts.current_page;
//创建一个<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>条数和每页<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>条数值
maxentries = (!maxentries || maxentries < )?:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < )?:opts.items_per_page;
//存储DOM元素，以方便从所有的内部结构中获取
var panel = jQuery(this);
// 获得附加功能的元素
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
if (current_page > ) {
pageSelected(current_page - );
return true;
}
else {
return false;
}
}
this.nextPage = function(){
if(current_page < numPages()-) {
pageSelected(current_page+);
return true;
}
else {
return false;
}
}
// 所有初始化完成，绘制<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
drawLinks();
// 回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
//opts.callback(current_page,this);});
}
代码还是比较容易看明白的，可以根据自己需要修改，这里使用的是自己的样式
样式代码
原来的css样式：
.pagination a,.pagination span {
display: inline-block;
padding: .em .em;
margin-right: px;
margin-bottom: px;
}
display: inline-block;
padding: .em .em;
margin-right: px;
margin-bottom: px;
}
.pagination .current {
background: #B;
color: #fff;
border: px solid #AAE;
}
.pagination .current.prev,.pagination .current.next{
color:#;
border-color:#;
background:#fff;
}
可以根据自己设计显示样式
2、使用方法
2.1、html显示
