1. La réception utilise la pagination ajax sans rafra?chissement. Elle doit principalement générer une barre d'outils de pagination. Le jquery.pagination.js est utilisé ici
Le code est publié ci-dessous

/**
  * 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() {
   /**
   * 計算最大分頁顯示數(shù)目
    */
   function numPages() {
     return Math.ceil(maxentries/opts.items_per_page);
    }  
   /**
   * 極端分頁的起始和結(jié)束點(diǎn)，這取決于current_page 和 num_display_entries.
   * @返回 {數(shù)組(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];
    }
      
    /**
     * 分頁鏈接事件處理函數(shù)
     * @參數(shù) {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;
   }
    
   /**
    * 此函數(shù)將分頁鏈接插入到容器元素中
     */
    function drawLinks() {
      panel.empty();
      var interval = getInterval();
       var np = numPages();
      // 這個輔助函數(shù)返回一個處理函數(shù)調(diào)用有著正確page_id的pageSelected。
       var getClickHandler = function(page_id) {
        return function(evt){ return pageSelected(page_id,evt); }
      }
      //輔助函數(shù)用來產(chǎn)生一個單鏈接(如果不是當(dāng)前頁則產(chǎn)生span標(biāo)簽)
      var appendItem = function(page_id, appendopts){
        page_id = page_id<0?0:(page_id<np?page_id:np-1); // 規(guī)范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);
      }
       //產(chǎn)生描述
      panel.append("<span>共有 " + maxentries + " 條記錄，當(dāng)前第 <b>" + (current_page + 1) + "</b>/" + np + " 頁</span>");
        
      // 產(chǎn)生"Previous"-鏈接
       if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
         appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
       }
     // 產(chǎn)生起始點(diǎn)
       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);
        }
       }
       // 產(chǎn)生內(nèi)部的些鏈接
       for(var i=interval[0]; i<interval[1]; i++) {
         appendItem(i);
       }
      // 產(chǎn)生結(jié)束點(diǎn)
       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);
         }
         
       }
       // 產(chǎn)生 "Next"-鏈接
     if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
         appendItem(current_page+1,{text:opts.next_text, classes:"next"});
       }
      }
      
     //從選項(xiàng)中提取current_page
     var current_page = opts.current_page;
     //創(chuàng)建一個顯示條數(shù)和每頁顯示條數(shù)值
    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元素，以方便從所有的內(nèi)部結(jié)構(gòu)中獲取
     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();
     // 回調(diào)函數(shù)
     //opts.callback(current_page, this);
  });
}

. Le code est relativement facile à lire, vous pouvez le modifier selon vos propres besoins. Ici, vous utilisez votre propre style

code de style :

.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;}

L'effet d'affichage est le suivant. :

Style CSS original?:

.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;
 }

Vous pouvez concevoir le style d'affichage selon le v?tre

2.

2.1, affichage html

<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 contient les données à afficher, et la barre d'outils de pagination générée est placée dans Pagination

2.2 code javascript

$(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;>查看明細(xì)</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,//當(dāng)前選中的頁面默認(rèn)是0，表示第1頁
    num_edge_entries: 2,//兩側(cè)顯示的首尾分頁的條目數(shù),默認(rèn)為0，好像是尾部顯示的個數(shù)
    num_display_entries: 2,//連續(xù)分頁主體部分顯示的分頁條目數(shù),默認(rèn)是10
    link_to: "javascript:void(0)",//分頁的鏈接
    prev_text: "上一頁",
    next_text: "下一頁",
    prev_show_always: true,
    next_show_always: true,
    callback: searchMyIncome
   });
  }

searchMyme doit obtenir les données de pagination. Le nombre total est placé dans un contr?le caché et le contr?le de pagination total doit être utilisé. L'appel ajax ici doit être exécuté de manière synchrone, sinon le nombre total renvoyé ne peut pas être obtenu. . pageInit() sert à initialiser le contr?le, donc le paramètre est fondamentalement OK.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Pour plus d'articles liés à jQuery Ajax implémentant une pagination sans actualisation, veuillez faire attention au site Web PHP chinois?!