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

前端之家收集整理的这篇文章主要介绍了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+ne_half,np):Math.min(opts.num_display_entries,np);
    return [start,end];
    }
 /**
  * <a href="/tag/fenye/" target="_blank" class="keywords">分页</a><a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>事件处理<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
  * @参数 {int} page_id 为新<a href="/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="/tag/hanshu/" target="_blank" class="keywords">函数</a>将<a href="/tag/fenye/" target="_blank" class="keywords">分页</a><a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>插入到容器元素中
  */
 function drawLinks() {
   panel.empty();
   var interval = getInterval();
   var np = numPages();
   // 这个辅助<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>返回一个处理<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a><a href="/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="/tag/hanshu/" target="_blank" class="keywords">函数</a>用来产生一个单<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>(如果不是当前页则产生span<a href="/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="/tag/IoU/" target="_blank" class="keywords">IoU</a>s"-<a href="/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="/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="/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="/tag/tiqu/" target="_blank" class="keywords">提取</a>current_page
 var current_page = opts.current_page;
 //创建一个<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>条数和每页<a href="/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="/tag/lianjie/" target="_blank" class="keywords">链接</a>
 drawLinks();
 // 回调<a href="/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;
}

.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显示

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

2.2 javascript代码

查看明细页面默认是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了~

猜你在找的Ajax相关文章