Pagination | client | data | database | show | Executive INTRODUCTION
One of the most common tasks in ASP applications is to display the query results of a database in a paging format. For example, when working with a large number of records, you should display only 10 items at a time, making it easier for visitors to use this information. There are already many articles on the web that demonstrate several ways to page through the results of a database query, with better articles including:
Paging through database records using stored procedures
Database Paging Sample Code
Paging records by using GetRows
But all of the methods described in these articles are paging through the server side. For example, if there are 30 database records, we want to display 10 records at a time. When the user requests the first page of data, the ASP page extracts the top 10 records and sends them to the customer. When the user is ready to read the following 10 records, he clicks on a link, when the ASP page is reloaded, through the query string passed in a new page value, the ASP page will take out the 11th to 20 records, and send them to the user.
In this article, we will migrate this entire process to the client. When users view data online, all 30 records are sent to the client in the form of a client-side JavaScript array. Additionally, the attached client JavaScript code is responsible for displaying records 1th through 10th, and linking to the following or previous recordset. When you click on these links, the client JavaScript code is executed and new data is displayed. Since these are all occurring on the client side, it is only necessary to contact the Web server when the page is first loaded, thereby obviating the data transfer consumption between the server and the client, and undoubtedly greatly improving the performance of the application.
Required client-side scripting
What client script should the ASP page generate to implement a database record that displays pagination on the client? As mentioned earlier, we need to create an array of clients. Because we're going to display database records in an HTML table, we're going to create an HTML array that might be used to display an HTML table row (<tr> <td> database Value </td> </tr>). This array will contain all the database elements that we want to allow the user to scroll through.
We also need a client-side JavaScript function to display a subset of these array values. Using this function, we can display the top N records, and when the user clicks on a link, it can display the back (or front) n Records. In other words, this function is responsible for client paging.
Finally, we need some methods to dynamically change the display of an HTML page without updating the page. This can be done through DHTML (Dynamic HTML). To do this, we need to create an HTML div tag where all the output is stacked, and then use the client JavaScript code to dynamically modify the content in this div tag. For more information about using DHTML, read the introduction to Dynamic HTML and the cross-browser DHTML tutorial.
