jquery插件pagination实现无刷新ajax分页

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+nehalf,np):Math.min(opts.numdisplay_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/yige/" 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/yige/" 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 + " 条记录，当前第 <b>" + (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/yige/" target="_blank" class="keywords">一个</a><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);

});
}

代码还是比较容易看明白的，可以根据自己需要修改，这里使用的是自己的样式

样式代码

rush:css;"> .pages {display: inline-block; overflow: hidden;padding: px ;text-align: center; width:%; margin:px ;} .pages b{ color:#ef;} .pages a { color:#; border: px solid #eee;cursor: pointer;font-size: px;margin-right: px; padding: px px; text-decoration: none; background-color:#fafafa;} .pages .currentPage{ background-color: #ae; border: px solid #ae;color: #fff; font-weight: bold;}

原来的css样式：

rush:css;"> .pagination a { text-decoration: none; border: px solid #AAE; color: #B; }

.pagination a,.pagination span {
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显示

rush:xhtml;">

ulProducts中放的是要显示的数据，生成的分页的工具条是放在Pagination中的

2.2 javascript代码

rush:js;"> $(function () { searchMyme(0); pageInit(); $("#btnSearch").on("click",function () { searchMyme(0); pageInit(); return false; }); }); function searchMyme(page,pageination) { var month = $("#btnMonth").val(); var obj = { Month: month,OpType: "getme",page: (page + 1),rows: 10 }; var url = "../../Controler/FinaceMo/GetStaffIncome_H.ashx"; $.get(url,obj,function (data) { $("#tbIncome").empty(); var obj = JSON.parse(data); var total = obj.Total; $("#hidetotalCount").val(total); var arrHtml = []; $.each(obj.Rows,function (i,data) { arrHtml.push("查看明细etotalCount").val(); $("#Pagination").pagination(parseInt(totalCount),{ items_per_page: 10,//current_page: 1,//当前选中的页面默认是0，表示第1页 num_edge_entries: 2,//两侧显示的首尾分页的条目数,默认为0，好像是尾部显示的个数 num_display_entries: 2,//连续分页主体部分显示的分页条目数,默认是10 link_to: "javascript:void(0)",//分页的链接 prev_text: "上一页",next_text: "下一页",prev_show_always: true,next_show_always: true,callback: searchMyIncome }); }

searchMyme是获取分页的数据，将总数放到一个隐藏的控件中，总数分页控件需要使用，这里ajax调用需要同步执行，不然取不到返回的总数 pageInit() 就是初始化控件

这样设置基本就OK了~

原文地址：https://www.jb51.cc/ajax/52216.html

jquery.pagination 无刷新ajax分页

上一篇：jQuery中的ajax async同步和异步详下一篇：通过js获取上传的图片信息临时保存

jquery插件pagination实现无刷新ajax分页

相关推荐