Asp.net implements common and efficient paging Methods

Paging It is the most common programming in web development, with a variety of implementation methods. But most of them are too complex, not clear, simple, and not object-oriented. The paging method provided below is not only simple, but also efficient and reusable.

ThisPagingThe idea is as follows:
1. Abstract The paging data into a class. You can think of it as a node of a two-way linked list.
The structure is as follows:

[Copy to clipboard]

Code:

// Page class
Public class page
{
Public int pageno {Get; set;} // page number
Public int from {Get; set;} // the previous page number
Public int to {Get; set;} // The last page number
Public ilist <Object> result {Get; set;} // data
Public page (INT page)
{
This. pageno = page;
}
}

2. Compile a pager class to manage the total page number calculated based on your data source, the data on the current page number, and generate the page number for navigation.

[Copy to clipboard]

Code:

Using system;
Using system. Collections. Generic;
Using system. text;

public class pager
{< br> int total_pages = 1;
int elem_per_page = 10;
int count_elements = 0;
ilist arr = new list ();
// create a function
Public Pager (ilist arr, int per_page)
{< br> elem_per_page = per_page;
count_elements = arr. count;
If (this. count_elements % per_page) = 0)
{< br> total_pages = (INT) (count_elements/per_page );
}< br> else
{< br> total_pages = (INT) (count_elements/per_page) + 1;
}< br> This. arr = arr;
}

// Calculate a page
Public page (INT pageno)
{
Page apage = new page (pageno );
Int from = This. elem_per_page * (pageno-1) + 1;
Int to = from + this. elem_per_page-1;
If (to> count_elements) {to = This. count_elements ;}

List <Object> res = new list <Object> ();
For (INT I = (from-1); I <to; I ++)
{
Res. Add (this. Arr [I]);
}
Apage. From = from;
Apage. To =;
Apage. Result = res;
Return apage;
}
// Generate a page number
Public String printpagenumbers (int cp, string URL)
{
String pageurl = "<Div id = \" paperindex \ "> ";
If (URL. Contains ("? ") {URL + =" & pageno = ";} else {URL + = "? Pageno = ";}
For (INT I = 1; I <this. total_pages + 1; I ++)
{
If (I! = CP)
{
Pageurl = pageurl + "[<a href = \" "+ URL +" "+ I +" \ ">" + I + "</a>]";
}
Else
{
Pageurl = pageurl + "<span id = \" Current \ "> [" + I + "] </span> ";

}
}
Return pageurl + "</div> ";
}
}

After a simple analysis, the creation function calculates the total number of pages based on the number of data entries displayed on each page, and calls page (INT) based on the page number you obtained to obtain the page instance on that page, the page instance contains its page number, the page number of its previous and next pages, and the data after the page is complete. Apply the printpagenumbers () function to obtain an index for navigation.
3. Usage
Ilist <Object> List = BLL. News. getall (); // retrieves data from the business layer.
Pager pager = new pager (list, 20); // retrieve data from the list for paging, 20 entries per page.
Page ap = pager. Page (int32.parse (request ["pageno"]); // get the page number to be displayed in get mode.
Label1.text = pager. printpagenumbers (int32.parse (request ["pageno"]), request. filepath. tostring (); // write a navigation bar to the interface
Because the AP. Result stores the paging data, we have a lot of options to display the data. If you use table expression, you can loop through the box and output the attributes of each object. If Ajax expression is used, you can convert the Object List to JSON or XML and pass it to the Ajax page. OK. Achieve by page.
4. Expansion
If you need more beautiful navigation, You can override the printpagenumbers method of the pager class, which is very easy to expand. For example, to achieve the following results.
Only five pages are displayed each time. You can determine whether to add the first page or other links based on the page number. For example.

I added the following paging navigation function to the pager class.

[Copy to clipboard]

Code:

# Region is followed by an extensible page number display method. I have implemented the other two methods.
/**
* Generate a leading String
* Generate whether the previous page or the last page exists based on the current page number.
**/
Public String get_prestr (INT pageindex, string URL)
{
String result = "<Div id = \" paperindex \ "> ";
If (URL. Contains ("? ") {URL + =" & pageno = ";} else {URL + = "? Pageno = ";}

If (pageindex> 1)
{

If (pageindex> = 3) // display
{
Result + = "<a href = \" "+ URL +" 1 \ "> top page </a>, <a href = \ "" + URL + (pageindex-1) + "\"> previous page </a> ,";
}
Else // the first page is displayed.
{
Result + = "<a href =" + URL + (pageindex-1) + "> previous page </a> ,";
}

}
Else
{

}
Return result;
}
/**
* Generate an intermediate numeric string
* If the current page of the total 13 pages is 5, 5 pages are displayed each time.
* Returns 3, 4, 5, 6, and 7.
**/
Public list <int> get_midpageno (INT pageindex, int display_count)
{
List <int> L = new list <int> ();
Int A = display_count/2; // returns the median value.
If (total_pages> display_count)
{
If (pageindex <=)
{
For (INT I = 1; I <display_count + 1; I ++)
{
L. Add (I );
}
}
If (pageindex> (total_pages-))
{
For (INT I = total_pages-display_count + 1; I <total_pages + 1; I ++)
{
L. Add (I );
}
}
If (pageindex> A) & (pageindex <= (total_pages-)))
{
For (INT I = pageindex-A; I <pageindex + A + 1; I ++)
{
L. Add (I );
}
}
}
Else
{
For (INT I = 1; I <total_pages + 1; I ++)
{
L. Add (I );
}

}

Return L;
}

/**
* Generate a post-import string
* Determines whether to display the last and last pages based on the current page number and the total page number.
**/
Public String get_nextstr (INT pageindex, string URL)
{
// With the leading StringAlgorithmSimilarly, calculate the last page of the current page first.
Int toend = total_pages-pageindex + 1;
String result = "";
If (URL. Contains ("? ") {URL + =" & pageno = ";} else {URL + = "? Pageno = ";}

If (toend> 1)
{

If (toend> = 3) // the next page is displayed from the last to the third page »»
{
Result + = "<a href = \" "+ URL + (pageindex + 1) +" \ "> next page </a>, <a href = \ "" + URL + total_pages + "\"> last page </a> ";
}
Else // The Last 2nd pages show the next page»
{
Result + = "<a href =" + URL + (pageindex + 1) + "> next page </a> ";
}

}
Else
{

}
Return result + "</div> ";
}
/*
* It is best to generate a fixed number of displayed page numbers display_count, which is an odd number to ensure that the current page is in the middle of the page number.
* The generated page number is enclosed by a div whose ID is paperindex. The current page number ID is current, facilitating style loading.
**/
Public String printpagenumbers (INT pageindex, string URL, int display_count)
{

String originurl = URL;
String pageurl = "";
If (URL. Contains ("? ") {URL + =" & pageno = ";} else {URL + = "? Pageno = ";}
Pageurl + = get_prestr (pageindex, originurl); // Add the leading String
// Generate intermediate string
Foreach (int A in get_midpageno (pageindex, display_count ))
{
If (A. Equals (pageindex ))
{
Pageurl + = "<span id = \" Current \ ">" + A + "</span> ,";
}
Else
{
Pageurl + = "<a href = \" "+ URL + A +" \ ">" + A + "</a> ,";
}
}
Pageurl + = get_nextstr (pageindex, originurl); // Add the post-import string
If (pageurl. endswith (", </div>") {pageurl = pageurl. Replace (", </div>", "</div> ");}
Return pageurl;
}
// Display the total number of records and total number of pages
Public String printpagenumbers (INT pageindex, string URL, int display_count, bool todisplaytotalrecorder, bool todisplaytotalpages)
{
String result = "";
If (todisplaytotalrecorder) {result + = "<span id = \" recordercount \ "> total records:" + this. Arr. Count + "</span> ";}
If (todisplaytotalpages) {result + = "<span id = \" pagecount \ "> note:" + this. total_pages + "page </span> ";}
Return result + printpagenumbers (pageindex, URL, display_count );
}
# Endregion

When you call this function to generate a navigation expression index, you need to work with a simple style table. Because I added the ID attribute to the output page, CSS can be loaded Based on the ID.
CSS:

[Copy to clipboard]

Code:

<Style type = "text/CSS">

# Paperindex {

Font: 14px #000000;

}

# Paperindex # current {

Border: 1px solid # 142a3b;

Background-color: b1d3ec;

Color: #000;
}

A, A: visited

{

Text-Decoration: none;

Color: #000;

}

A: hover

{

Color: red;

Text-Decoration: underline;

}

</Style>

Demo:
List <Object> List = BLL. MERs. getall (); // retrieves the data list from the business layer or data layer.
Pager pager = new pager (list, 20); // generate pager. The data is retrieved from the list, with 20 entries per page.
Int currentpageindex = int32.parse (request ["pageno"]); // get the pageno method. pageno is the page number parameter variable defined in the class.
Page page = pager. Page (currentpageindex); // you can use page. Result to obtain the list <Object> data of the current page for display.
Then, the pager printpagenumbers method is used to generate the string of the page number.