Display JS Code
VAR recordcount;//global variable Total number of bars var PageSize = 5;//Global variables How many data per page//Click Query, start paging function btnsearch_query () {ajaxpage (1, Pagesi Ze);} Paging method function Ajaxpage (Curpage, PageSize) {///empty 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= ' CPB ' style= ' margin-right:5px; ' >1</span><a disabled= ' disabled ' style= ' margin-right:5px; ' > next page →</a> "); $ (' #CurrentPageSize '). HTML (curpage);//page//name var name = $ (' #Search_NameContains '). Val (); Combining JSON query criteria, querying paging data (Curpage, curpage as necessary) var Cacceyjson = ' {' name ': ' + ' + ' ', ' curpage ': ' + curpage + ', ' PageSize ": ' + PageSize + '} '; $.ajax ({type: ' POST ', Async:false, Cache:false, url: "Ajaxpage/postajax.aspx?z=searchqueryb Yajaxpage&a= "+ math.random (), DataType: ' JSON ', Data:escape (Cacceyjson), success:fUnction (data) {if (data = = NULL) {$ (' #SearchQuery_Table tbody '). HTML ("<tr><td Colspa n= ' 6 ' class= ' red ' > not find data! </td></tr> "); } else if (data! = NULL && data.msg! = ' login_timeout ') {//Returns the data combination form, and then converts the object into a JSON string//dictionary< String, object> dic = new dictionary<string, object> (); Dic. ADD ("RecordCount", pageargs.recordcount);//total number of//dic. ADD ("Data", list); if (data["data"] = null) {var str = '; for (var i = 0; i < data["Data"].length; i++) {str + = "<TR><TD></TD></TR&G t; ";/ /combination Display Data} $ (' #SearchQuery_Table tbody '). html (str); RecordCount = data["RecordCount"]; $ (' #pageCount '). HTML (RecordCount); Max pages var maxpage = RecordCount% PageSize = = 0? parseint (Recordcount/pagesize): (parseint (recordcount/pagesize) + 1); $ (' #MainContent_AspNetPager_Msg '). html (');//pagination link var span = "<a style= ' margin-right:5px; cursor:pointer; ' href= ' javascript:void (0) ' onclick= ' Pageindexclick (this) ' id= ' toppage ' pageindex= ' 0 ' >← prev </a > "; var firstpage = 0; var PageCount = number of 0;//cycles if (Maxpage >) {pagecount = 10; } else {pagecount = Maxpage; } if (Curpage >) {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= ' CPB ' style= ' margin-right:5px; cursor:pointer; ' onclick= ' Curpagesizeclick ("+ 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 ' >→ page </a> "; $ (' #MainContent_AspNetPager_Msg '). HTML (span); } else {$ (' #SearchQuery_Table tbody '). HTML ("<tr><td colspan= ' 6 ' class= ' red ' ; no data is queried! </td></tr> "); }} else if (data.msg = = ' Login_timeout ') {LoginTimeout (); } } });} Home, previous page, next page, last click Function Pageindexclick (obj) {//current page var currenpagesize = $.trim ($ (' #CurrentPageSize '). html ()); if (currenpagesize! = ") {currenpagesize = parseint (currenpagesize); }//id var type = $ (obj). attr (' id '); Home if (type = = ' FirstPage ') {currenpagesize = 1; Ajaxpage (Currenpagesize, PageSize); $ (' #CurrentPageSize '). html (' 1 '); }//Previous page else if (type = = ' Toppage ') {if (Currenpagesize > 1) {currenpagesize = Currenpage Size-1; } else {currenpagesize = 1; } AjaxPage (Currenpagesize, PageSize); $ (' #CurrentPageSize '). HTML (currenpagesize); }//Next page else if (type = = ' NextPage ') {var size = currenpagesize + 1; var maxpage = RecordCount% PageSize = = 0? parseint (recordcount/pagesize): (parseint (recordcount/pagesize) + 1); if (size <= maxpage) {currenpagesize = currenpagesize + 1} ajaxpage (Currenpagesize, PageSize ); $ (' #CurrentPageSize '). HTML (currenpagesize); }//Last else if (type = = ' LastPage ') {currenpagesize = (RecordCount% PageSize = = 0? parseint (Recordcoun T/pagesize): parseint (recordcount/pagesize) + 1); Ajaxpage (Currenpagesize, PageSize); $ (' #CurrentPageSize '). HTML (currenpagesize); }}//page Count function Curpagesizeclick (curpage, obj) {$ (' #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 tab le-striped table-hover table-bordered bootstrap-datatable "id=" searchquery_table "> <thead> <tr style= "height:25px;" > <td> Barcode </td> <td> name </td> <td> Upper counter price </td& Gt <td> Item number </td> </tr> </thead> <tbody> </tbody > </table> </div></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></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 > </div>
Bootstrap, JQuery, AJAX data paging