asp.net use Ajax to achieve no refresh paging _ practical Tips

Query function is the most important development of a function, a large number of data display, we use the most is paging.

In ASP.net, there are many data display controls, such as the Repeater, the GridView, with the most GridView, it also has its own paging function. But we know that using the GridView to display the data, if you do not disable viewstate, the page size will be very large. And usually we click on the first page, the next page, Prev, the last of these features will cause page postback, that is, the need to fully interact with the server, back and forth the time to respond, the amount of data transmitted is very large.

Ajax paging can be a good solution to these problems.

Data Display pasing.aspx page JS code:

Copy Code code as follows:

<script type=text/javascript>
var pageIndex = 0;
var pageSize = 5;
Window.onload = Ajaxgetdata (name,0,5);
function Ajaxgetdata (name, index, size) {
$.ajax ({
Url:jQueryPaging.aspx,
Type:get,
Data:name= + Name + &pageindex= + index + &pagesize= + size,
Datatype:json,
Success:function (data) {
var htmlstr =;
Htmlstr =
Htmlstr =
Htmlstr =
Htmlstr + =;
Htmlstr + +//data.cloudfilelists.length
for (var i = 0; i < data.cloudfileLists.length; i++)
{
Htmlstr + =;
Htmlstr =
+
Htmlstr + =;
}
Htmlstr + =;
Htmlstr + =;
Htmlstr + =;
Htmlstr + =;
Htmlstr + =;
Htmlstr + =;
Htmlstr + + <table><thead><tr><td> number </td><td> filename </td></tr></ Thead><tbody><tr><td> + data.cloudfilelists[i]. Fileid + </td><td> + data.cloudfilelists[i]. FileName + </td></tr></tbody><tfoot><tr><td colspan= "' 6 '" >;
Htmlstr + + <span> total record + data. Count +; Total <span id= "' count '" > + (data. Count% 5 = 0? parseint (data. COUNT/5): parseint (data. COUNT/5 + 1) + </span> page + </span>;
Htmlstr + + home;
HTMLSTR + + Previous page;
Htmlstr + + after a page;
Htmlstr = Last;
Htmlstr + + <input type= "' Text '" ><input type= "' button '" value= "' Jump '" onclick= "' gotoappointpage (This) '" >;
Htmlstr + </td></tr></tfoot></table>;

$ (#divSearchResult). HTML (HTMLSTR);//overriding HTML
},
Error:function (XMLHttpRequest, Textstatus, Errorthrown) {
alert (XMLHttpRequest);
alert (textstatus);
alert (Errorthrown);
}
});
}
Home
function Gotofirstpage () {
PageIndex = 0;
Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);
}
Previous page
function Gotoprepage () {
PageIndex-= 1;
PageIndex = PageIndex >= 0? pageindex:0;
Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);
}
Next page
function Gotonextpage () {
if (PageIndex + 1 < parseint ($ (#count). Text ()) {
PageIndex + 1;
}
Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);
}
Last
function Gotoendpage () {
PageIndex = parseint ($ (#count). Text ())-1;
Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);
}
Jump
function Gotoappointpage (e) {
var page = $ (E). Prev (). Val ();
if (isNaN (page)) {
Alert (Please enter a number!);
}
else {
var temppageindex = PageIndex;
PageIndex = parseint ($ (E). Prev (). Val ())-1;
if (PageIndex < 0 | | | pageIndex >= parseint ($ (#count). Text ()) {
PageIndex = Temppageindex;
Alert (Please enter a valid page range!);
}
else {
Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);
}
}
}
</script>

Same page HTML code:

The CS code for the Jquerypaging.aspx page is as follows:

Reference this namespace: using System.web.script.serialization;//javascriptserializer to use.

Copy Code code as follows:

protected void Page_Load (object sender, EventArgs e)
{
Int32 pageIndex = Int32.minvalue;
Int32 pageSize = Int32.minvalue;
String name = String.Empty;
JavaScriptSerializer JSS = new JavaScriptSerializer ();
if (Request[name]!= null)
{
Name = Request[name]. ToString ();
if (Request[pageindex]!= null)
{
PageIndex = Int32.Parse (Request[pageindex]. ToString ());
PageSize = request[pagesize]!= null? Int32.Parse (Request[pagesize]. ToString ()): 5;
ilist<cloudfile> cloudfilelists = new list<cloudfile> ();//cloudfile is a class written by itself, representing a piece of data </cloudfile>< /cloudfile>

Cloudfile CF = null;
int cout = 0;
DataSet ds = Lookdatafromdb (name, PageIndex, Pagesize,out cout);
foreach (DataRow row in DS. Tables[0]. Rows)//Your data to be encapsulated into an LIS, can be JSS. Serialize (), or it will be an error.
{
CF = new Cloudfile ();
Cf. Fileid = Row[filepathid]. ToString ();
Cf. FileName = Row[filename]. ToString ();
Cloudfilelists.add (CF);
}
if (Cloudfilelists.count > 0)
{
Response.Write ({Count: + (cout) +, cloudfilelists: + JSS. Serialize (cloudfilelists) +});
Response.End ();
}
}
}
}
Private DataSet Lookdatafromdb (string name, int pageIndex, int pagesize,out int cout)
{
DataSet ds = new DataSet ();
Try
{
PageIndex = 5 * Pageindex;//pageindex, indicating which data the page starts from
Here write your own data acquisition method, the data obtained well dumped into the DS, back to the front. (There should be a better way, I think, you can also send comments to discuss with us ...) ）
}
catch (Exception)
{
cout = 0;
ds = NULL;
}
return DS;
}

Copy Code code as follows:

<span style= "font-family:" >cloudfile class </span>

Copy Code code as follows:

public class Cloudfile
{
Public String Fileid {get; set;}
Public String FileName {get; set;}
Public String Filedirname {get; set;}
}

Such a simple example of no refresh paging is done. Because of my JS level is limited, now can only do this. Of course, you can add some new features. Here I just want to share my method with you. As for the function, later continue to perfect the!!!