Jquery+ajax implementation without refreshing paging _jquery

1, the foreground uses Ajax without refreshing paging , the main need for the raw page of the sidebar, where the use of jquery.pagination.js
to post the code below

 /** * 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 (check README for documentation) * @return {Object} jQuery Object * * JQuery.fn.pagination = function (MaxEntries, opts) {opts = Jquery.extend ({items_per_page:10, num_display_entries : Ten, 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 () {/** * Calculates maximum paging display number */function numpages () {return Math.ceil (maxentries/opts
    . items_per_page);
   /** * The start and end points of the extreme paging, depending on the current_page and num_display_entries. * @ returns {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]; /** * Paging Link event handler * @ parameter {int} page_id for new page number */function pageselected (page_id, evt) {Curr
      Ent_page = page_id;
      Drawlinks ();
     var continuepropagation = opts.callback (page_id, panel);
        if (!continuepropagation) {if (evt.stoppropagation) {evt.stoppropagation ();
        else {evt.cancelbubble = true;
   } return continuepropagation;
      /** * This function inserts the paging link into the container element/function Drawlinks () {panel.empty ();
       var interval = Getinterval ();
      var np = NumPages ();
       This auxiliary function returns a handler function call with the correct page_id pageselected. var geTclickhandler = function (page_id) {return function (evt) {return pageselected (PAGE_ID,EVT);} The//auxiliary function is used to produce a single link (if the current page produces a span label) var appenditem = function (page_id, appendopts) {page_id = page_id& Lt;0?0: (page_id<np?page_id:np-1); Canonical page id value appendopts = jquery.extend ({text:page_id+1, 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); }//Generate Description Panel.append ("<span> Total" + maxentries + "record, current <b>" + (Current_page + 1) + "</b&gt
       
      ;/"+ NP +" page </span> "); ProducePrevious "-Link if (opts.prev_text && (current_page > 0 | | opts.prev_show_always)) {Appenditem (Curr
       Ent_page-1,{text:opts.prev_text, classes: "Prev"}); //Generate starting point if (Interval[0] > 0 && opts.num_edge_entries > 0) {var end = Math.mi
         N (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 HRE
        F> "+opts.ellipse_text+" </a>). Appendto (panel);
       }//Generate some internal links for (Var i=interval[0]; i<interval[1]; i++) {appenditem (i); //Generate end point if (Interval[1] < NP && opts.num_edge_entries > 0) {if (np-opts.num_e Dge_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); }//Generate "Next"-Link if (opts.next_text && current_page < np-1 | | opts.next_show_alw
       ays)) {Appenditem (Current_page+1,{text:opts.next_text, classes: "Next"});
     ///extract current_page var current_page = opts.current_page from options;
     Create a number of display bars and display values per 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;
     Store DOM elements to facilitate the acquisition of the var panel = JQuery (this) from all internal structures;
     Element this.selectpage = function (page_id) {pageselected (page_id) for which additional functionality is obtained;
         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;
     }//All initialization completed, Draw link drawlinks ();
  callback function//opts.callback (current_page, this);
}); }

The code is relatively easy to understand, can be modified according to their own needs, here is the use of their own style

Style code:

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

The display effect is as follows:

Original CSS style:

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

You can design the display style according to your own

2, the use of methods

2.1, HTML display

 <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>

In the ulproducts is the data to be displayed, and the resulting paging bar is placed in the pagination

2.2 JavaScript code

$ (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= ' Mydetail.")aspx? Account= "+data. account+ "&month=" +data.
    month+ "' class= ' a-blue ' > View Details </a></td></tr>");
    });
   $ ("#tbIncome"). Append (Arrhtml.join ('));
  });
  };
   function Pageinit () {var totalcount = $ ("#hideTotalCount"). Val ();
    $ ("#Pagination"). Pagination (parseint (totalcount), {items_per_page:10,//current_page:1,//the currently selected page defaults to 0, representing page 1th num_edge_entries:2,//the number of entries displayed on both sides of the page, the default is 0, as if the number of rear display num_display_entries:2,//the number of paging entries displayed in the main section of the continuous page by default is link_to: "Java Script:void (0) ",//Pagination link prev_text:" prev ", Next_text:" Next Page ", Prev_show_always:true, Next_show_always:true
  , callback:searchmyincome}); }

Searchmyme is to get the paging data, put the total number in a hidden control, the total paging control needs to be used, where Ajax calls need to be synchronized, or not get the total number returned Pageinit () is the initialization of the control, so the basic setting is OK.

The above is the entire content of this article, I hope to help you learn.