Home > Developer > Web Develop
Pagination technology for Web development and pagination for web Development
Those who are familiar with Web development know paging, but those who are not programming are never new to it, I just don't know that this is a very important requirement and Technology in Web development.
When you browse online articles or images, you will often see the following page numbers:
This is the so-called paging technology. Why do we need paging?
Too much content will make our webpage too long. When we browse the webpage, We have to drag the scroll bar or scroll wheel that keeps turning the mouse to see all the content, you don't think it's okay to turn around for one lap, two laps, or three laps. But if you keep turning around like this, I believe you will feel very uncomfortable. In this way, in order to get a better user experience, the paging technology is introduced.
The paging technology is divided into two methods: false paging and real paging.
False paging: It is to extract all the data in the database at a time, then write code on the Web Front-end page, and then display the data by page. in simple words, retrieve the data first, and then pagination. The following uses the pagination attribute AllowPaging and PageSize of the ASP. NET Control GridView to implement false pagination. The code example is as follows:
Add a test ASP page and display all the news table content in the database in the GridView, for example:
Next, we will perform pagination on the display content. First, we will set relevant settings in the property list of the GridView control, such:
Then, write the following statement in the page and its code:
<span style="font-size:18px;"><body> <form id="form1"runat="server"> <asp:GridViewID="GridView1" runat="server" AllowPaging="True"Height="316px" PageSize="5" Width="469px"OnPageIndexChanging="GridView1_PageIndexChanging"> </asp:GridView> </form></body></span>
The code file corresponding to the page is as follows:
<Span style = "font-size: 18px;"> namespace Web {public partial class test: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {if (! Page. isPostBack) {BindNews () ;}// bind the news private void BindNews () {GridView1.DataSource = newNewsManager (). selectAll (); GridView1.DataBind () ;}// pagination control for the GridView control protected voidGridView1_PageIndexChanging (object sender, GridViewPageEventArgs e) {GridView1.PageIndex = e. newPageIndex; BindNews () ;}}</span>
The running result after completion is as follows:
This method is only applicable when there are few data records. If we want to use a search engine, the search results will contain tens of millions or even hundreds of millions of data records, if you want to adopt the false paging technology, the program execution speed and data transmission speed will be slowed down to an astonishing level. Is there any way to solve this problem of massive data paging display? At this time, the real paging technology emerged.
Real paging: only the records requested on the current page are selected in the database. In general, the records are displayed on the first page, that is, 10-20 records requested on the current page, then we will retrieve 10-20 records from the database, and not all the data will be retrieved. As a result, the speed will be very fast.
Here is an example of true paging. Here we need to use the ASPNetPager control. You can find this control on the Internet and add it to VS. I will not describe it here. We will start using it directly.
Similarly, the news table is displayed on real pages. Create an ASP page, add a GridView control and an AspNetPager control, and set some attributes for the latter, for example, if the number of Waits is displayed on each page, the page file code is as follows:
<Span style = "font-size: 18px;"> <body> <form id = "form1" runat = "server"> <asp: gridView ID = "GridView1" runat = "server" BackColor = "# CCFFFF" Height = "160px" Width = "800px"> </asp: GridView> <webdiyer: aspNetPager ID = "anp" runat = "server" FirstPageText = "first page" LastPageText = "last page" NextPageText = "next page" NumericButtonCount = "5" OnPageChanged = "anp_PageChanged" PageSize = "5" PrevPageText = "" BackColor = "#99FF99" ForeColor = "Blue" Width = "800px"> </webdiyer: aspNetPager> </form> </body> </span>
The code file corresponding to the page is as follows:
<Span style = "font-size: 18px;"> namespace Web {public partial class test: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {if (! Page. isPostBack) {// display settings of the page for initial loading anp. recordCount = 30; GridView1.DataSource = new NewsManager (). selectNewsByPage (anp. startRecordIndex, anp. endRecordIndex); GridView1.DataBind () ;}// event protected void anp_PageChanged (object sender, EventArgs e) triggered when the page number of the AspNetPager control changes {// Response. write ("START record count:" + anp. startRecordIndex + "<br> Number of ending records:" + anp. endRecordIndex); GridView1.DataSource = new NewsManager (). selectNewsByPage (anp. startRecordIndex, anp. endRecordIndex); GridView1.DataBind () ;}}</span>
Finally, we need to provide the query function displayed by page on the DAL layer. This is very important, as shown below:
<Span style = "font-size: 18px; ">/// <summary> /// use the true paging technology to display news by PAGE /// </summary> /// start from the <param name =" startindex "> page row number </param> /// <param name = "endindex"> end row </param> /// <returns> </returns> public DataTable SelectNewsByPage (int startindex, int endindex) {DataTable dt = new DataTable (); string procName = "with temptb1 as (select ROW_NUMBER () over (order by id desc) as row number, * from news) select * from temptb1 where row between @ startIndex and @ endIndex "; SqlParameter [] paras = new SqlParameter [] {new SqlParameter (" @ startIndex ", startindex ), new SqlParameter ("@ endIndex", endindex)}; dt = sqlhelper. executeQuery (procName, paras, CommandType. text); return dt ;}</span>
Finally, let's look at the running results:
Summary: paging technology is very common in Web application development. As long as we deal with databases, we will inevitably use paging technology. Therefore, this is a required skill for Web developers. Of course, the above only describes two simple methods to achieve paging display. There are many implementation methods of paging technology. If you are interested, you can refer to the materials for more information.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
