jquery plugin pagination implementation without refreshing Ajax paging _jquery

1, the foreground uses the Ajax not to refresh the paging, the main need to have the raw material page The tool bar, here uses is Jquery.pagination.js

Plug-in parameters can refer to----Zhang Long Hao-jquery.pagination.js pagination

Post the code below

  /** * This jQuery plugin displays pagination links inside the selected elements.
  * @author Gabriel Birke (Birke *at* d-scribe *dot* de) * @version. * @param {int} maxentries number of entries to Paginate * @param {Object} opts several options (check README for documenta tion) * @return {Object} jQuery object/jQuery.fn.pagination = function (MaxEntries, opts) {opts = Jquery.extend ( {items_per_page:, num_display_entries:, Current_page:, Num_edge_entries:, 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 (maxe
     Ntries/opts.items_per_page);
      /** * The start and end points of the extreme paging, depending on the current_page and num_display_entries. * @ return {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];
       /** * Paging Link event handler * @ parameter {int} page_id for new page number */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;
       /** * 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:( page_id<np?page_id:np-); Canonical page id value 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); }//Generate Description Panel.append ("<span> Total" + maxentries +) record, current paragraph<b> "+ (Current_page +) +" </b>/"+ NP +" page </span> "); Generate "Previous"-Link if (opts.prev_text && (Current_page > | | opts.prev_show_always)) {Appenditem (
       Current_page-,{text:opts.prev_text, classes: "Prev"}); //Generate starting point 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);
       }//Generate some internal links for (Var i=interval[]; i<interval[]; i++) {appenditem (i); //Generate end point if (interval[] < NP && opts.num_edge_entries >) {if (np-opts.num_e
       Dge_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); }//Generate "Next"-Link if (opts.next_text && current_page < np-| | opts.next_show_a
       lways)) {Appenditem (Current_page+,{text:opts.next_text, classes: "Next"});
     ///extract current_page var current_page = opts.current_page from options;
     Create a display bar number and per-page display Bar value maxentries = (!maxentries | | maxentries <)?: MaxEntries; Opts.items_per_page = (!opts.items_per_page | | Opts.items_per_page <)?: O
     Pts.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 >) {pageselected (Current_page-);
      return true; else {return false; } this.nextpage = function () {if (Current_page < NumPages ()-) {pageselected (current_page+)
         ;
       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: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;}

Original CSS style:

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

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, indicating
        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 the rear display num_display_entries:2,//the number of paging entries displayed in the main section of the continuous page, by default, is 10 Link_to: "javascript: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 executed synchronously, or the total number of returns is not taken.
Pageinit () is the initialization of the control

This setting is basically OK ~