JQuery, Ajax paging, jqueryajax Paging

JQuery, Ajax paging, jqueryajax Paging
1. Preview

2. 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"> "TemplateTable"> <thead> <tr> <td> Template Name </td> <td style = "width: 400px; "> SMS content </td> <td> operation </td> </tr> </thead> <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 class =" row "> <div class =" col-lg-12 col-sm-12 col-xs-12 col-xxs-12 "> <div id =" MainContent_AspNetPager_Msg "class =" paginator "> <a style =" margin-right: 5px; cursor: pointer; "href =" javascript: void (0) "onclick =" PageIndexClick (this) "id =" FirstPage "pageindex =" 1 "> first page </a> <a style =" margin-right: 5px; cursor: pointer; "href =" javascript: void (0) "onclick =" PageIndexClick (this) "id =" TopPage "pageindex =" 0 "> previous page </a> <span class =" cpb "style =" margin-right: 5px; cursor: pointer; "id =" CurrenPageSize "> 1 </span> <a style =" margin-right: 5px; cursor: pointer; "href =" javascript: void (0) "onclick =" PageIndexClick (this) "id =" NextPage "pageindex =" 0 "> → next page </a> <a style =" margin-right: 5px; cursor: pointer; "href =" javascript: void (0) "onclick =" PageIndexClick (this) "id =" LastPage "pageindex =" 0 "> last page </a> </div>

3. JS Code

// Load the text message template content-Paging function TemplateAjax () {$ ('# TemplateTable tbody tr '). remove (); // clear Table tbody AjaxPage (1, PageSize);} // the current page, showing the number of items function AjaxPage (curpage, PageSize) {// save var ProvinceId =$ ('# MainContent_ddlsheng '). val (); // city var CityId = $ ('# MainContent_ddlshi '). val (); $. ajax ({cache: false, url: "/ajaxpage/getajax. aspx? T = smsplateformtemplateajaxpage & ProvinceId = "+ ProvinceId +" & CityId = "+ CityId +" & CurPage = "+ curpage +" & PageSize = "+ PageSize +" & a = "+ math. random (), dataType: 'json', success: function (data) {if (data! = Null) {var str = ''; for (var I in data [" Data "]) {var Content = data ["Data"] [I] ["SmsTemplateContent"]; if (Content. length> = 60) {Content = Content. substring (0, 60 );} str + = "<tr> <td>" + data ["Data"] [I] ["SmsTemplateName"] + "</td> <td>" + Content +" </td> <input type = 'button 'value = 'Delete 'class = 'btn btn-primary' onclick = 'templatedelete ("+ data [" Data"] [I] ["Id"] + ") '/> </td> </tr> ";}$ (' # Te MplateTable tbody'{.html (str); RecordCount = data ["RecordCount"]; Comment ('{pagecount'{.html (RecordCount );}}})} // on the home page, Previous Page, next page, and last page, click function PageIndexClick (obj) {// current page var CurrenPageSize = required ('{currenpagesize'{.html (); // id var type = $ (obj ). attr ('id'); // home page if (type = 'firstpage') {CurrenPageSize = 1; AjaxPage (CurrenPageSize, PageSize); Response ('{currenpagesize'{.html ('1 ');} // previous else if (type = 'TopPa Ge ') {if (CurrenPageSize> 1) {CurrenPageSize = parseInt (CurrenPageSize)-1;} else {CurrenPageSize = 1;} AjaxPage (CurrenPageSize, PageSize ); upper (CurrenPageSize);} // next else if (type = 'nextpage') {var size = parseInt (CurrenPageSize) + 1; var maxpage = RecordCount % PageSize = 0? ParseInt (RecordCount/PageSize): (parseInt (RecordCount/PageSize) + 1); if (size <= maxpage) {CurrenPageSize = parseInt (CurrenPageSize) + 1} AjaxPage (response, pageSize); ('{currenpagesize'{.html (CurrenPageSize);} // else if (type = 'lastpage') {CurrenPageSize = (RecordCount % PageSize = 0? ParseInt (RecordCount/PageSize): parseInt (RecordCount/PageSize) + 1); AjaxPage (CurrenPageSize, PageSize); interval (CurrenPageSize); }}// Delete the template function partition (id) {$. ajax ({cache: false, url: "/ajaxpage/getajax. aspx? T = smsplateformtemplateajaxdelete & Id = "+ id +" & a = "+ Math. random (), ype: 'json', success: function (data) {if (data! = Null) {alert (data ['result']); AjaxPage (1, PageSize );}}});}

4. C # background code

If (Request. queryString ["t"] = "smsplateformtemplateajaxpage") {try {string ProvinceId = Request. queryString ["ProvinceId"]; string CityId = Request. queryString ["CityId"]; int CurPage = 1; // the current page of int. tryParse (Request. queryString ["CurPage"], out CurPage); int PageSize = 5; // The number of int data entries displayed on each page. tryParse (Request. queryString ["PageSize"], out PageSize); StringBuilder sb = new StringBuilder (); sb. append ("1 = 1 And (delete_flag is null or delete_flag = 0) "); // saves if (ProvinceId! = Null &&! String. IsNullOrEmpty (ProvinceId) & ProvinceId! = "0") {sb. Append (string. Format ("and ProvinceId = {0}", ProvinceId. Trim ();} // city if (! String. IsNullOrEmpty (CityId) & CityId! = "0" & CityId! = "Null") {sb. append (string. format ("and CityId = {0}", CityId. trim ();} PageArgs pageArgs = new PageArgs (); pageArgs. pageSize = PageSize; pageArgs. pageIndex = CurPage; pageArgs. tableName = "D_SMSTemplate"; pageArgs. primaryKey = "Id"; pageArgs. fields = ""; pageArgs. filter = sb. toString (); pageArgs. order = "create_time desc"; IList <SMSTemplateEntity> list = new SMSTemplateBLL (). getSMSTemplateAll (ref pageArgs); List <Dictionary <string, object> li = new List <Dictionary <string, object> (); Dictionary <string, object> dic = new Dictionary <string, object> (); dic. add ("RecordCount", pageArgs. recordCount); // The total number of dic entries. add ("Data", list); JavaScriptSerializer serializer = new JavaScriptSerializer (); var result = serializer. serialize (dic); Response. write (result);} catch {Response. write (null );}}

How to Write ajax paging using jquery! Urgent

This is really not easy to say.

1. server-side paging.
2. ajax call of jQuery

These two meetings are okay. Only the following paging style needs to be adjusted.
 
Use a Jquery AJAX paging code. net

My Baidu space contains the content you want: "JQuery Pagination AJax paging instance For ASP. NET (JQuery + ashx + ADO. NET Entity Data Model )". There are also corresponding instances of MVC3 and ASP versions, and hope to help you.