A non-refreshing table paging instance _jquery based on jquery implementation

This article illustrates the non-refresh table paging based on jquery implementation. Share to everyone for your reference, specific as follows:

The effect chart is as follows:

HTML structure:

<table id= "Cs_table" class= "DataTable" ></table>

CSS style:

html,body{margin:0;padding:0} a:focus {Outline:none}//* universal table display/table, TH, td {Font:12px Arial,helvetica,sans-serif , ' Arial '; margin:0;padding:0} Table{border-spacing:0;border-collapse:collapse}. DataTable {width:100%;border-style:
None;background-color: #fff; margin-bottom:20px;text-align:left;} . DataTable th,. DataTable td {Padding:5px;line-height:30px}. DataTable thead th {background-color: #eee; margin:0;text- align:left;border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf font-weight:500}. DataTable tbody td {Backgrou Nd-color: #fff; border-bottom:1px solid #ddd table-layout:fixed;word-break:break-all;font-weight:400}. DataTable Tbody Tr.evenrow td {Background-color: #f4f4f4; DataTable tfoot td {Background-color: #fafafa; text-align:right;
border-bottom:1px solid #cfcfcf;} /* table pagination List/. DataTable td.paging A {border:1px solid #eee; color: #444; margin:4px; padding:2px 7px; text-decoration:no Ne
Text-align:center;} /* Table pagination current page//. DataTable td.paging A.curreNT {background: #eee; border:1px solid #CFCFCF; color: #444; font-weight:bold; DataTable td.paging a.current{border:0

 ; Cursor:auto;background:none}

JavaScript Encapsulation code:

/** * Abstract Table */function abstracttable () {//---------content attribute this.id = null; Each table has a unique id this.tableobj = NULL;    Table Object this.rownum = 0;   Row number This.colnum = 0;   Number of columns This.header = [];  Table header Data this.content = [];  Body Data//----------provide external use to obtain form internal data This.currentclickrowid = 0;
    The currently clicked row Data//---Gets the number of columns in this table through the header of the table This.getcolnum = function () {this.colnum = This.header.length;
  return this.colnum;
  //-----------Table self-building behavior this.cleartable = function () {};
  This.showheader = function () {};
  This.showcontent = function (begin,end) {};
  This.showfoot = function () {}; ---------Paging function Attribute This.alldatanum = 0; Total data Bar Number This.displaynum = 10; Show bar number per page this.maxpagenum = 0; Maximum page number value This.currentpagenum =1;//Current page value//tfoot Paging Group This.groupdatanum = 10;    Each group shows 10 pages This.groupnum = 1; Current group//--------Paging functional behavior this.paginationfrombegintoend = function (begin,end) {} This.first = function () {}//home page this. last = function () {}//final page This.prev = FuNction () {}//previous page this.next = function () {}//next page This.goto = function () {}//skip to a page//-----------table Initialization This.init = Fun
  Ction (Begin,end) {}}/* Table object template/function Tabletemplet (table_id) {abstracttable.call (this);
This.id = table_id;
  /** * Table Object * @param options */function table (options) {if (!options) {return;}
  if (!$.isplainobject (options)) {return;}
  Tabletemplet.call (This,options.tableid);
  Get the Table Object This.tableobj = $ ("#" +this.id);
  Empty table Contents this.cleartable = function () {this.tableobj.html (""); }//Implementation paging behavior this.paginationfrombegintoend= function (x,y) {this.maxpagenum = Math.ceil (this.alldatanum/this.display
    Num);
    var arrpage = [];
    for (var i= x;i<y;i++) {Arrpage.push (this.content[i]);
  return arrpage; } This.showheader = function () {if (This.header!= null) {var $thead = $ ("<thead>"), $tr = $ ("
      ;tr> "), $th; for (Var i=0;i<this.colnum;i++) {$th = $ (' <th> '). HTML (this. Header[i]);
      $th. Appendto ($TR);
      $tr. Appendto ($thead); $thead. Appendto (This.tableobj)}}//initialize tbody this.showcontent = function (begin,end) {if (this.content!= nul
      L) {var $tbody = $ ("<tbody>"), $tr, $TD;
      var tempdata = this.paginationfrombegintoend (begin,end), len = Tempdata.length;
        Loop creates line for (Var i=0;i<len;i++) {$tr = $ ("<tr>"). Appendto ($tbody);
        if (i%2==1) {$tr. addclass ("Evenrow"); }//Loop Create column Get key for (Var key in Tempdata[i]) {$TD = $ ("<td>"). html (Tempdata[i][key]). App
        EndTo ($TR);
    } this.tableobj.append ($tbody); }///initialize TFOOT this.showfoot = function () {var $tfoot = $ ("<tfoot>"), $tr = $ ("<tr>"), $
      TD = $ ("<td>"). attr ("colspan", This.colnum). addclass ("paging");
      $tr. Append ($TD);
      $tfoot. Append ($TR);
      This.tableobj.append ($tfoot);This.pagination ($TD);
    }//Table Paging this.pagination = function (Tdcell) {var $td = typeof (Tdcell) = = "Object"? Tdcell: $ ("#" + Tdcell);
    Home var OA = $ ("<a/>");
    Oa.attr ("href", "#1");
    oa.html ("home page");
    $td. Append (OA);
      Previous page if (this.currentpagenum>=2) {var OA = $ ("<a/>");
      Oa.attr ("href", "#" + (this.currentpagenum-1));
      Oa.html ("previous page");
    $td. Append (OA); }//Normal display format if (this.maxpagenum <= this.groupdatanum) {//10 page for a group for (var i = 1;i <= this.maxpagenum;
        i++) {var OA = $ ("<a/>");
        Oa.attr ("href", "#" +i);
        if (This.currentpagenum = = i) {oa.attr ("class", "current");
        } oa.html (i);
      $td. Append (OA); }else{//more than 10 pages (that is, after the first group) if (this.groupnum<=1) {//The first group displays for (var j = 1;j <= this.groupdatanum; j+
           +) {var OA = $ ("<a/>");
           Oa.attr ("href", "#" +j);
          if (This.currentpagenum = = j) {   Oa.attr ("Class", "current");
           } oa.html (j);
         $td. Append (OA); }else{//The second group shows var begin = (this.groupdatanum* (this.groupnum-1)) + 1, end, MAXGR
         Oupnum = Math.ceil (this.maxpagenum/this.groupdatanum); if (this.maxpagenum%this.groupdatanum!=0&&this.groupnum==maxgroupnum) {end = this.groupdatanum* (This.gro
         upNum-1) +this.maxpagenum%this.groupdatanum}else{end = this.groupdatanum* (This.groupnum);
           for (var j = begin;j <= end; j + +) {var OA = $ ("<a/>");
           Oa.attr ("href", "#" +j);
           if (This.currentpagenum = = j) {oa.attr ("class", "current");
           } oa.html (j);
         $td. Append (OA);
      Next page if ((this.maxpagenum-this.currentpagenum) >= 1) {var OA = $ ("<a/>");
      Oa.attr ("href", "#" + (This.currentpagenum + 1));
 Oa.html ("next page");     $td. Append (OA);
    }//Last var OA = $ ("<a/>");
    Oa.attr ("href", "#" + this.maxpagenum);
    Oa.html ("last");
    $td. Append (OA);
    var page_a = $td. Find (' a ');
    var tempthis = this;
      Page_a.unbind ("click"). Bind ("click", Function () {var nownum = parseint ($ (this). attr (' href '). substring (1)); if (nownum>tempthis.currentpagenum) {//Next Group of if (tempthis.currentpagenum%tempthis.groupdatanum==0) {tempTh
          Is.groupnum + 1;
          var maxgroupnum = Math.ceil (tempthis.maxpagenum/tempthis.groupdatanum);
          if (tempthis.groupnum>=maxgroupnum) {tempthis.groupnum = Maxgroupnum; }} if (Nownum<tempthis.currentpagenum) {//previous group if ((tempthis.currentpagenum-1)%tempthis.grou
          pdatanum==0) {tempthis.groupnum = 1;
          if (tempthis.groupnum<=1) {tempthis.groupnum = 1; }} if (Nownum==tempthis.maxpagenum) {//Direct-click last var maxgroupnum =Math.ceil (Tempthis.maxpagenum/tempthis.groupdatanum);
      Tempthis.groupnum = Maxgroupnum;
        } if (nownum==1) {var maxgroupnum = Math.ceil (tempthis.maxpagenum/tempthis.groupdatanum);
      Tempthis.groupnum = 1;
      } tempthis.currentpagenum = Nownum;
      Tempthis.init ((tempthis.currentpagenum-1) *tempthis.displaynum, tempthis.currentpagenum*tempthis.displaynum);
    return false;
  });
    }//Initialize This.init = function (begin,end) {this.header = options.headers;
    This.colnum = This.header.length;
    This.content = Options.data;
    This.alldatanum = This.content.length;
    if (options.displaynum) {this.displaynum = Options.displaynum;
    } if (options.groupdatanum) {this.groupdatanum = Options.groupdatanum;
    } this.cleartable ();
    This.showheader ();
    This.showcontent (Begin,end);
  This.showfoot ();
} this.init (0,options.displaynum);

 }

Call Mode:

<script type= "Text/javascript" >
  var data = [];
  for (Var i=0;i<334;i++) {
    Data[i] = {id:i+1,name: "Jason" + (I+1), Gender: "Male", Age:26,address: "Chengdu"}
  var cs = new Table ({
    "tableId": "Cs_table",  //Must be
    "headers": ["Serial number", "name", "Sex", "age", "address"],  //Must be
    " Data ":d ATA,/    /Must be
    " Displaynum ": 6,/  //must  default ten
    " Groupdatanum ": 9//optional  default ten
});
</script>

For more information on jquery-related content readers can view the site: "JQuery Expansion Tips Summary", "jquery common Classic Effects Summary", "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary" and " A summary of common operational techniques for jquery

I hope this article will help you with the jquery program design.