JQuery-based paging instances for non-refreshing tables and jquery table paging instances

JQuery-based paging instances for non-refreshing tables and jquery table paging instances

This example describes the implementation of jQuery-based Brushless new table paging. We will share this with you for your reference. The details are as follows:

As follows:

Html structure:

<table id="cs_table" class="datatable"></table>

Css style:

Html, body {margin: 0; padding: 0} a: focus {outline: none;}/* common table display */table, th, td {font: 12px Arial, helvetica, sans-serif, ''; 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 {background-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 paging list */. datatable td. paging a {border: 1px solid # eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align: center ;} /* the current page of the table pagination */. datatable td. paging. current {background: # eee; border: 1px solid # CFCFCF; color: #444; font-weight: bold ;}. datatable td. paging. 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; // number of rows this. colNum = 0; // Number of columns this. header = []; // header data this. content = []; // body data // ---------- provide external use to obtain internal table data this. currentClickRowID = 0; // The row data currently clicked // --- obtain the number of columns in this table through the header. 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 () {}; // --------- this. allDataNum = 0; // The total number of data entries this. displayNum = 10; // number of entries displayed per page this. maxPageNum = 0; // maximum page number value this. currentPageNum = 1; // current page number value // tfoot paging group this. groupDataNum = 10; // each group displays 10 pages this. groupNum = 1; // The current group // -------- paging behavior this. paginationFrom BeginToEnd = function (begin, end) {} this. first = function () {}// homepage this. last = function () {}// last page this. prev = function () {}// previous page this. next = function () {}// next this. goto = function () {}// jump to a page // ----------- initialize this table. init = function (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); // obtain the table object this. tableobj = $ ("#" + this. id); // clear the table content this. clearTable = function () {this.tableobj.html ("");} // implement paging behavior this. paginationfrombeg1_end = function (x, y) {this. maxPageNum = Math. ceil (this. allDataNum/this. displayNum); var arrPage = []; for (var I = x; I <y; I ++) {arrPage. push (this. content [I]);} return arrPage;} this. sho WHeader = function () {if (this. header! = Null) {var $ thead = $ ("<thead>"), $ tr = $ ("<tr>"), $ th; for (var I = 0; I <this. colNum; I ++) {$ th = $ ("<th>" example .html (this. header [I]); $ th. appendTo ($ tr);} $ tr. appendTo ($ thead); $ thead. appendTo (this. tableobj) }}// initialize tbody this. showContent = function (begin, end) {if (this. content! = Null) {var $ tbody = $ ("<tbody>"), $ tr, $ td; var tempDaTa = this. paginationfrombeg1_end (begin, end), len = tempDaTa. length; // create rows cyclically (var I = 0; I <len; I ++) {$ tr = $ ("<tr> "). appendTo ($ tbody); if (I % 2 = 1) {$ tr. addClass ("evenrow");} // create a column in a loop to obtain the key for (var key in tempDaTa [I]) in the object. {$ td = $ ("<td>" ).html (tempDaTa [I] [key]). appendTo ($ tr) ;}} this. tableobj. append ($ tbody) ;}// initialize tfoot this. showFoot = func Tion () {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 pagination this. pagination = function (tdCell) {var $ td = typeof (tdCell) = "object "? TdCell: $ ("#" + tdCell); // homepage var oA =$ ("<a/>"); oA. attr ("href", "#1"); oA.html ("Homepage"); $ 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) {// a group of for (var I = 1; I <= this. maxPageNum; I ++) {var oA =$ ("<a/>"); oA. attr ("href", "#" + I); if (this. curr EntPageNum = I) {oA. attr ("class", "current");} oA.html (I); $ td. append (oA) ;}} else {// after 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 display var begin = (this. groupDataNum * (this. groupNum-1) + 1, end, maxGroupNum = Math. ceil (this. maxPageNum/this. groupDataNum); if (this. maxPageNum % this. groupDataNum! = 0 & this. groupNum = maxGroupNum) {end = this. groupDataNum * (this. groupNum-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) ;}// var oA at the end of the page =$ ("<a/>"); oA. attr ("href", "#" + this. maxPageNum); oA.html ("last page"); $ 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) {// The next group if (tempThis. currentPageNum % tempThis. groupDataNum = 0) {tempThis. groupNum + = 1; var maxGroupNum = Math. ceil (tempThis. maxPageNum/tempThis. groupDataNum); if (tempThis. groupNum> = maxGroupNum) {tempThis. groupNum = maxGroupNum ;}}if (nowNum <tempThis. currentPageNum) {// the previous group if (tempThis. currentPageNum-1) % tempThis. groupDataNum = 0) {tempThis. groupNum-= 1; if (tempThis. groupNum <= 1) {tempThis. groupNum = 1 ;}}if (nowNum = tempThis. maxPageNum) {// click 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 method:

<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", // required "headers": ["no.", "name", "gender", "Age ", "Address"], // The value must be "data": data, // The value must be "displayNum": 6, // The default value must be 10 "groupDataNum ": 9 // optional default 10}); </script>