Bootstrap, jQuery, Ajax data paging, jqueryajax

Bootstrap, jQuery, Ajax data paging, jqueryajax
Demonstrate JS Code

Var RecordCount; // The total number of global variables var PageSize = 5; // The number of data entries per page of the global variable // when you click query, start paging function btnSearch_Query () {AjaxPage (1, PageSize);} // function of the paging method AjaxPage (CurPage, PageSize) {// clear the data display Table $ ('# SearchQuery_Table tbody tr '). remove (); ('{pagecount'{.html ('0'); ('{maincontent_aspnetpager_msg'{.html ("<a disabled = 'Disabled 'style = 'margin-right: 5px; '> previous page </a> <span class = 'ccp' style = 'margin-right: 5px;'> 1 </spa N> <a disabled = 'Disabled 'style = 'margin-right: 5px;'> next page → </a> "); Comment ('{currentpagesize'{.html (CurPage ); // page // Name var Name = $ ('# Search_NameContains '). val (); // combine Json query conditions and query paging data (CurPage and CurPage are required) var CacceyJson = '{"Name": "' + Name + '", "CurPage": '+ CurPage +', "PageSize": '+ PageSize +'} '; $. ajax ({type: 'post', async: false, cache: false, url: "AjaxPage/PostAjax. aspx? Z = SearchQueryByAjaxPage & a = "+ Math. random (), dataType: 'json', data: escape (CacceyJson), success: function (data) {if (data = null) {$ ('# SearchQuery_Table tbody'0000.html ("<tr> <td colspan = '6' class = 'red'> no data found! </Td> </tr> ");} else if (data! = Null & data. msg! = 'Login _ timeout') {// returned data combination form, and then convert the object to a JSON string // Dictionary <string, object> dic = new Dictionary <string, object> (); // dic. add ("RecordCount", pageArgs. recordCount); // The total number of items // dic. add ("Data", list); if (data ["Data"]! = Null) {var str = ''; for (var I = 0; I <data [" Data "]. length; I ++) {str + = "<tr> <td> </tr> "; // display data in combination} $ ('# SearchQuery_Table tbody'character .html (str); RecordCount = data ["RecordCount"]; Comment ('character pagecount'character .html (RecordCount ); // maximum number of pages var maxpage = RecordCount % PageSize = 0? ParseInt (RecordCount/PageSize): (parseInt (RecordCount/PageSize) + 1); values ('{maincontent_aspnetpager_msg'{.html (''); // pagination link var span = "<a style = 'margin-right: 5px; cursor: pointer; 'href = 'javascript: void (0) 'onclick = 'pagedexclick (this) 'id = 'topped' pageindex = '0'> previous page </a> "; var firstPage = 0; var pagecount = 0; // number of cycles if (maxpage> 10) {pagecount = 10;} else {pagecount = maxpage;} if (Cur Page> 10) {pagecount = CurPage; var firstPage = CurPage-10; if (firstPage> = 1) {span + = "<a style = 'margin-right: 5px; cursor: pointer; 'href = 'javascript: void (0) 'onclick = 'curpagesizeclick ("+ firstPage +", this)'>... </a> ";}}for (var j = firstPage + 1; j <pagecount + 1; j ++) {if (j = CurPage) {span + = "<span class = 'ccp' style = 'margin-right: 5px; cursor: pointer; 'onclick = 'curpagesizec Lick ("+ j +", this) '> "+ j +" </span> ";} else {span + =" <a style = 'margin-right: 5px; cursor: pointer; 'href = 'javascript: void (0) 'onclick = 'curpagesizeclick ("+ j +", this) '> "+ j +" </a> ";}} pagecount = pagecount + 1; if (maxpage> pagecount) {span + = "<a style = 'margin-right: 5px; cursor: pointer; 'href = 'javascript: void (0) 'onclick = 'curpagesizeclick ("+ pagecount +", this) '>... </a> ";} span + = "<A style = 'margin-right: 5px; cursor: pointer; 'href = 'javascript: void (0) 'onclick = 'pageindexclick (this) 'id = 'nextpage' pageindex = '0'> → next page </a> "; ('{maincontent_aspnetpager_msg'{.html (span );} else {$ ('# SearchQuery_Table tbody'0000.html ("<tr> <td colspan = '6' class = 'red'> no data found! </Td> </tr> ") ;}} else if (data. msg = 'login _ timeout') {LoginTimeout () ;}});} // click function PageIndexClick (obj) on the home page, Previous Page, next page, and last page) {// current page var CurrenPageSize = pai.trim(('{currentpagesize'{.html (); if (CurrenPageSize! = '') {CurrenPageSize = parseInt (CurrenPageSize);} // id var type = $ (obj ). attr ('id'); // home page if (type = 'firstpage') {CurrenPageSize = 1; AjaxPage (CurrenPageSize, PageSize); Response ('{currentpagesize'{.html ('1 ');} // previous else if (type = 'toppage') {if (CurrenPageSize> 1) {CurrenPageSize = CurrenPageSize-1;} else {CurrenPageSize = 1;} AjaxPage (CurrenPageSize, pageSize); $ ('# CurrentPageSize '). ht Ml (CurrenPageSize);} // next else if (type = 'nextpage') {var size = CurrenPageSize + 1; var maxpage = RecordCount % PageSize = 0? ParseInt (RecordCount/PageSize): (parseInt (RecordCount/PageSize) + 1); if (size <= maxpage) {response = CurrenPageSize + 1} AjaxPage (CurrenPageSize, PageSize ); certificate ('{currentpagesize'{.html (CurrenPageSize);} // The Last else if (type = 'lastpage') {CurrenPageSize = (RecordCount % PageSize = 0? ParseInt (RecordCount/PageSize): parseInt (RecordCount/PageSize) + 1); AjaxPage (CurrenPageSize, PageSize); Second (CurrenPageSize); }}// click function compute (CurPage, obj) {comment ('{currentpagesize'{.html (CurPage); AjaxPage (CurPage, PageSize );}

HTML code

<Div class = "row"> <div class = "col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class = "table-striped table-hover table-bordered bootstrap-datatable" id = "row"> "SearchQuery_Table"> <thead> <tr style = "height: 25px; "> <td> Bar Code </td> <td> name </td> <td> cabinet price </td> <td> renewal </td> </tr> </thead> <tbody> </table> </div> <div class = "row" style = "margin-top: 15px; "> <div class =" col-lg-12 col-sm-12 col-xs-12 col-xxs-12 "> <div style =" font-size: 14px; "> total <label style =" color: #20A8D8; font-size: 14px; "id =" pageCount "> 0 </label> records </div> <div class =" row "> <div class =" col-lg-12 col-sm-12 col-xs-12 col-xxs-12 "> <div id =" MainContent_AspNetPager_Msg "class =" paginator "> </div> <div class =" hidden "id =" CurrentPageSize "> 1 </div> </div>