jQuery+Ajax implementiert aktualisierungsfreies Paging

1. Die Rezeption verwendet Ajax-Non-Refresh-Paging. Hier wird hauptsächlich die Paging-Symbolleiste generiert.
Der Code ist unten aufgeführt.

/**
  * This jQuery plugin displays pagination links inside the selected elements.
  *
  * @author Gabriel Birke (birke *at* d-scribe *dot* de)
  * @version 1.2
  * @param {int} maxentries Number of entries to paginate
  * @param {Object} opts Several options (see README for documentation)
 * @return {Object} jQuery Object
 */
 jQuery.fn.pagination = function(maxentries, opts){
   opts = jQuery.extend({
   items_per_page:10,
   num_display_entries:10,
   current_page:0,
   num_edge_entries:0,
   link_to:"#",
   prev_text:"Prev",
   next_text:"Next",
   ellipse_text:"...",
   prev_show_always:true,
   next_show_always:true,
   callback:function(){return false;}
  },opts||{});
 
   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/2);
     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), 0):0;
       var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
       return [start,end];
    }
      
    /**
     * 分页链接事件处理函数
     * @参数 {int} page_id 为新页码
    */
     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;
   }
    
   /**
    * 此函数将分页链接插入到容器元素中
     */
    function drawLinks() {
      panel.empty();
      var interval = getInterval();
       var np = numPages();
      // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
       var getClickHandler = function(page_id) {
        return function(evt){ return pageSelected(page_id,evt); }
      }
      //辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
      var appendItem = function(page_id, appendopts){
        page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值
        appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
        if(page_id == current_page){
          var lnk = jQuery("<a href class=&#39;currentPage&#39;>" + (appendopts.text) + "</a>");
        }else{
           var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
            .bind("click", getClickHandler(page_id))
            .attr(&#39;href&#39;, opts.link_to.replace(/__id__/,page_id));    
        }
         if (appendopts.classes) { lnk.addClass(appendopts.classes); }
         panel.append(lnk);
      }
       //产生描述
      panel.append("<span>共有 " + maxentries + " 条记录，当前第 <b>" + (current_page + 1) + "</b>/" + np + " 页</span>");
        
      // 产生"Previous"-链接
       if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
         appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
       }
     // 产生起始点
       if (interval[0] > 0 && opts.num_edge_entries > 0)
       {
         var end = Math.min(opts.num_edge_entries, interval[0]);
         for(var i=0; i<end; i++) {
           appendItem(i);
         }
         if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
         {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
        }
       }
       // 产生内部的些链接
       for(var i=interval[0]; i<interval[1]; i++) {
         appendItem(i);
       }
      // 产生结束点
       if (interval[1] < np && opts.num_edge_entries > 0)
      {
         if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
        {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
         }
         var begin = Math.max(np-opts.num_edge_entries, interval[1]);
         for(var i=begin; i<np; i++) {
           appendItem(i);
         }
         
       }
       // 产生 "Next"-链接
     if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
         appendItem(current_page+1,{text:opts.next_text, classes:"next"});
       }
      }
      
     //从选项中提取current_page
     var current_page = opts.current_page;
     //创建一个显示条数和每页显示条数值
    maxentries = (!maxentries || maxentries < 0)?1:maxentries;
     opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
     //存储DOM元素，以方便从所有的内部结构中获取
     var panel = jQuery(this);
     // 获得附加功能的元素
     this.selectPage = function(page_id){ pageSelected(page_id);}
     this.prevPage = function(){ 
       if (current_page > 0) {
         pageSelected(current_page - 1);
         return true;
       }
       else {
        return false;
      }
    }
    this.nextPage = function(){ 
      if(current_page < numPages()-1) {
        pageSelected(current_page+1);
       return true;
      }
      else {
        return false;
       }
    }
    // 所有初始化完成，绘制链接
   drawLinks();
     // 回调函数
     //opts.callback(current_page, this);
  });
}

Der Code ist relativ einfach zu lesen. Sie können ihn an Ihre eigenen Bedürfnisse anpassen.

Stilcode:

.pages {display: inline-block; overflow: hidden;padding: 15px 0;text-align: center; width:100%; margin:50px 0;}
.pages b{ color:#e75f49;}
.pages a { color:#666; border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;margin-right: 5px; padding: 8px 12px; text-decoration: none; background-color:#fafafa;}
.pages .currentPage{ background-color: #00a0e9; border: 1px solid #00a0e9;color: #fff; font-weight: bold;}

Der Anzeigeeffekt ist wie folgt :

Original-CSS-Stil:

.pagination a {
 text-decoration: none;
  border: 1px solid #AAE;
  color: #15B;
 }
 .pagination a, .pagination span {
  display: inline-block;
 padding: 0.1em 0.4em;
  margin-right: 5px;
 margin-bottom: 5px;
 }
  
.pagination .current {
 background: #26B;
 color: #fff;
 border: 1px solid #AAE;
 }
 .pagination .current.prev, .pagination .current.next{
  color:#999;
  border-color:#999;
  background:#fff;
 }

Sie können den Anzeigestil nach Ihren Wünschen gestalten

2

2.1, HTML-Anzeige

<div class="second-ul-ctn">
  <ul class="second-ul" id="ulProducts">
  </ul>
 <div class="pages">
  <input type="hidden" id="hideTotalCount" />
   <div id="Pagination" class="pagination">
   </div>
  </div>
 </div>

ulProducts enthält die anzuzeigenden Daten und die generierte Paging-Symbolleiste wird in Paginierung

2.2 Javascript-Code

<🎜 platziert >

$(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("<tr><td>" + (i + 1) + "</td>");
     arrHtml.push("<td>" + data.Account + "</td>");
     arrHtml.push("<td>" + data.Name + "</td>");
     arrHtml.push("<td>" + data.Month + "</td>");
     arrHtml.push("<td>" + data.IncomeAmount + "</td>");
     arrHtml.push("<td><a href=&#39;MyDetail.aspx?Account="+data.Account+"&Month="+data.Month+"&#39; class=&#39;a-blue&#39;>查看明细</a></td></tr>");
    });
    $("#tbIncome").append(arrHtml.join(&#39;&#39;));
   });
  };
  function pageInit() {
   var totalCount = $("#hideTotalCount").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 dient zum Abrufen der Paging-Daten. Die Gesamtzahl wird in einem versteckten Steuerelement abgelegt, und die Gesamtpaging-Steuerung muss hier synchron ausgeführt werden, da sonst die zurückgegebene Gesamtzahl nicht abgerufen werden kann pageInit() dient der Initialisierung des Steuerelements, daher ist die Einstellung grundsätzlich in Ordnung.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Weitere Artikel zur Implementierung von aktualisierungsfreiem Paging durch jQuery+Ajax finden Sie auf der chinesischen PHP-Website!