JS table paging components: fupage design ideas and specific usage (open source will be considered in the future, and we will strive for jsfupage in 2015)

JS table paging components: fupage design ideas and specific usage (open source will be considered in the future, and we will strive for jsfupage in 2015)
I. background
When I was working in seconds, a js senior engineer wrote many of his own components, one of which is a paging component called st-grid. However, in my opinion, there are too many bugs. I often report bugs to him, and I don't know why others haven't found them.
After returning to work in Wuhan, I used my spare time practices to improve my official website. From the frontend to the backend, I did it myself.
The requirement for 1st pages is that the comments below the article are asynchronously loaded. The 2nd requirement is that table management, such as the background management system, often needs to list records of tables such as user and log.

Ii. Instances
<TableClass = "table-bordered table-hover table-condensed"> <thead> <tr> <th> name </th> <th> bank institution code </th> <th> Status </th> <th> operation </th> </tr> </thead> <tbody id ="BodyHolder"> </Tbody> </table> <div id ="PageHolder"> </Div> <script> varFormatStatus= Function (value) {var strStatus = ""; if (value = 1) {strStatus = "invalid";} else if (value = 11) {strStatus = "pending review";} else if (value = 21) {strStatus = "approved";} return strStatus ;}; (function () {var fuPage = newFuPage({"Url": "$ {base}/bank/list. json "," params ": {" pageNo ": 1," pageSize ": 10}," isTable ": true," bodyHolder ":" bodyHolder "," pageHolder ": "pageHolder ","TableTemplate":" <Tr> <td >{name} </td> <td >{bankcode} </td> <td> @ formatStatus ({status }) </td> "+" <td> <a href = '$ {base}/bank/edit.html? Id = {id} '> edit </a> | "+" <a href = 'javascript:; 'onclick = 'pass (\ "{id }\", \ "{name} \"); '> approved </a> | "+" <a href = 'javascript :; 'onclick = 'unpass (\ "{id} \", \ "{name }\"); '> Audit Failed </a> "+" </tr> "}); fuPage. send () ;}) (); </script>

Iii. instance interpretation
1. Define table
This is not the key. It is mainly to determine the header.
The header is usually fixed.
Currently, the header is written by the developer. (The requirements I met are basically the same)

2. Define two containers-holder
BodyHolder. The name can be retrieved at will, but must be matched.
Fupage puts the table body content in this div.

PageHolder stores pages, such as "Previous Page" and "next page.

3. Define the FuPage object and request data from the background.
Var fuPage = new FuPage ({..});
FuPage. send ();

4. parameters.
Url: Background Request Path
Params: Parameters
BodyHolder, pageHolder, container id
TableTemplate: a data row template.

5. template Rendering
Parses the variable {varName }.
Custom functions.
For example
<Td> @ formatStatus ({status}) </td>

Function formatStatus (status ){

}

Iv. Design Ideas/*** FansUnion Page Library v1.0.7 * LastUpdate: 2015-3-13 * Copyright 2012 ~ 2112, xiaolei * QQ: 240370818 * Email: fansunion@qq.com **/
/*** The paging component can be used as a page for custom content or standard forms, such as post comments and user lists. Table paging. The template is imported from outside. * <Br/> there are two ways to construct a table: the constructor new FuPage (options) and the data request send (params ). * Event notification methods include onfilled, onedited, and onerror (not available currently) */function FuPage (options) {this. url = options. url; this. params = options. params; this. startNo = 1; this. endNo = 1;
This. tableTemplate = options. tableTemplate;
This. bodyHolder = options. bodyHolder; this. pageHolder = options. pageHolder ;}
// Send the FuPage request to the backend. prototype. send = function (params) {var that = this; // console. log (params); if (typeof params = 'object') {$. each (params, function (p, val) {that. params [p] = val ;})} console. log ("FuPage params:" + that. params); $. post (this. url, this. params, function (data) {var page = data. page; if (! Page) {// console. error ("page is null, data is" + data); data = $. parseJSON (data); page = data. page;} that. renderTable (page); renderPage (that, page); addPageEvent (that, page) ;}}// render table subject FuPage. prototype. renderTable = function (page) {// var OK = this. isTable & this. tableTemplate! = Null; if (! This. tableTemplate) {console. error ("tableTemplate is null"); return false;} var divs = ''; $ (" # "+ this.bodyholder#.html (divs );}
// Undefined variable. Use "" to show var nullToEmpty = function (value) {if (value = null | value = undefined) {value = "";} return value;} // render the paging bar function renderPage (fuPage, page) {var pageDiv = buildPage (fuPage, page); $ ("#" + fuPage.pageHolder).html (pageDiv );}
// Bind the click Event function addPageEvent (fuPage, page) {// solves the problem of ID conflict caused by multiple instances on the same page. var prefix = fuPage. pageHolder; var nextPageA = document. getElementById (prefix + "nextPageA"); if (nextPageA! = Null) {nextPageA. onclick = function () {goToPage (fuPage, fuPage. params. pageNo + 1) };}var prevPageA = document. getElementById (prefix + "prevPageA"); if (prevPageA! = Null) {prevPageA. onclick = function () {goToPage (fuPage, fuPage. params. pageNo-1)} var beginPageA = document. getElementById (prefix + "beginPageA"); if (beginPageA) {beginPageA. onclick = function () {goToPage (fuPage, 1) ;}} var endPageA = document. getElementById (prefix + "endPageA"); if (endPageA! = Null) {endPageA. onclick = function () {goToPage (fuPage, page. totalPage) }}for (var no = fuPage. startNo; no <= fuPage. endNo; no ++) {var id = prefix + "noPageA" + no; // console. log (id); var noPageA = document. getElementById (id); if (noPageA! = Null & no! = FuPage. pageNo) {$ ("#" + id ). on ("click", function (e) {// find the event source. The event source text content "1" is the number of pages. string is converted to int, prevent str + int from returning stringvar number = $ (this ). text (); // convert string to int type number = new Number (number );
GoToPage (fuPage, number )});}}}
// Load the specified page function goToPage (fuPage, no) {fuPage. params. pageNo = no; fuPage. send ();}
// Construct the html of the page bar. Remember to bind the event function buildPage (fuPage, page) {var totalPage = page to buttons such as page 1. totalPage; var pageNo = page. pageNo | 1; var pageSize = page. pageSize; var totalCount = page. totalCount; if (totalCount <= 0) {console. log ("totalCount = 0") return "" ;}// semi-distance algorithm var half = 5; var startNo = 1; var endNo = totalPage; var left = pageNo-half; var right = pageNo + half; if (left <1) {startNo = 1;} else {startNo = left;} if (right> totalPage) {endNo = totalPage ;} else {endNo = right;} fuPage. startNo = startNo; fuPage. endNo = endNo; var prefix = fuPage. pageHolder; // pagination link, bind event var ul = '<ul class = "pagination">'; if (pageNo = 1) {ul + = '<li class = "disabled"> <span> homepage </span> </li> <span> previous page </span> </li> ';} else {ul + = '<li> <a href = "javascript :; "id =" '+ prefix + 'ininpagea "> homepage </a> </li> <a href =" javascript :; "id =" '+ prefix + 'prevpagea "> previous page </a> </li>';} for (var no = startNo; no <= endNo; no ++) {if (no = pageNo) {ul + = '<li class = "active"> <a href = "javascript :; "> '+ no +' </a> </li> ';} else {ul + =' <li> <a href =" javascript :; "id =" '+ prefix + 'nopagea' + no + '">' + no + '</a> </li> ';}}
If (pageNo = totalPage) ul + = '<li class = "disabled"> <span> next page </span> </li> <li class = "disabled"> <span> last page </span> </li> '; else {ul + = '<li> <a href = "javascript :; "id =" '+ prefix + 'nextpagea "> next page </a> </li> <a href =" javascript :; "id =" '+ prefix + 'endpagea "> last page </a> </li> ';} ul + = '<li> <span> total' + totalPage + 'page </span> </li> <span> total' + totalCount + '</ span> </li> </ul> '; return ul ;}