Home>

1. Use ajax non-refresh paging at the front desk,Mainly need to generate a paging toolbar,Here is jquery.pagination.js

For plugin parameters, please refer to Zhang Longhao-jquery.pagination.js

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 (see readme for documentation)
  * @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 () {
     /**
      * Calculate the maximum number of pages displayed
      * /
     function numpages () {
       return math.ceil (maxentries/opts.items_per_page);
     }
     /**
      * Extreme paging start and end points,It depends on 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 is the 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 a pagination link into a container element
      * /
     function drawlinks () {
       panel.empty ();
       var interval=getinterval ();
       var np=numpages ();
       //This helper function returns a handler for pageselected with the correct page_id.
       var getclickhandler=function (page_id) {
         return function (evt) {return pageselected (page_id, evt);}
       }
       //The helper function is used to generate a single link (if it is not the current page, it generates a span tag)
       var appenditem=function (page_id, appendopts) {
         page_id=page_id<?:( 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>" + (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>" has "+ maxentries +" records, current<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 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_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);
         }
       }
       //generate "next" -link
       if (opts.next_text&&(current_page<np- || opts.next_show_always)) {
         appenditem (current_page +, {text:opts.next_text, classes:"next"});
       }
     }
     //Extract current_page from options
     var current_page=opts.current_page;
     //Create a display bar number and display bar value per page
     maxentries=(! maxentries || maxentries<)?:maxentries;
     opts.items_per_page=(! opts.items_per_page || opts.items_per_page<)?:opts.items_per_page;
     //Store the dom element for easy access from all internal structures
     var panel=jquery (this);
     //get the additional function element
     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;
       }
     }
     //all initialization is complete,Draw link
     drawlinks ();
     //Callback
     //opts.callback(current_page, this);
   });
 }

The code is relatively easy to understand,Can be modified according to your needs,I'm using my own style here

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

The 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 your own display style

2.How to use

2.1 HTML display

<div>
       <ul>
       </ul>
       <div>
         <input type="hidden" />
         <div>
         </div>
       </div>
     </div>

ulproducts puts the data to be displayed,The generated pagination toolbar is placed in 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 +" ">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, which means the first page
        num_edge_entries:2, //the number of entries at the beginning and end of the page,Default is 0, it seems to be the number displayed at the end
        num_display_entries:2, //The number of paging entries displayed in the main part of the continuous paging,Default is 10
        link_to:"javascript:void (0)", //Paged links
        prev_text:"Previous",        next_text:"Next Page",        prev_show_always:true,        next_show_always:true,        callback:searchmyincome
      });
    }

searchmyme is to get paginated data,Put the totals into a hidden control,The total paging control needs to be used,Here the ajax call needs to be executed synchronously,Otherwise, the total number returned cannot be obtained

pageinit () is to initialize the control

This setting is basically ok ~

  • Previous Talking about the usage of Map in java
  • Next JS handling json date formatting issues