Bootstrap, JQuery, AJAX data paging

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 + = "&LT;TR&GT;&LT;TD&GT;&LT;/TD&GT;&LT;/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