Home>Network programming tutorial>ASP tutorial

Seven ways to implement pagination display in ASP

Author：Eve Cole Update Time：2025-03-21 12:32:01

This article mainly introduces seven methods to implement pagination display in ASP. These seven methods can be divided into four categories. Friends who need it can refer to it.

In Microsoft's ASP programming system, the establishment of ADO objects makes accessing databases from web pages an easy task, especially the ADO Recordset object makes it more convenient and free to display the output of control data. In Visual InterDev6.0 (hereinafter referred to as VI6.0), due to the introduction of object models such as Script Object Model (hereinafter referred to as SOM), Design-Time Control (hereinafter referred to as DTC), and Data Environment Object Model (hereinafter referred to as DEOM), Make the web pages more convenient to access the database.

Because of the topic, regarding database connections, the following only gives code and brief comments, and focuses on how to use Recordset objects (or controls) to implement pagination display of data records. According to my understanding, the key to pagination display is to master the properties and methods of ADO's Recordset object or DTC (design-time control).

These seven weapons displayed on pages are summarized into four categories: The first and second ones I temporarily call them pure ASP method.

This is also the most commonly used method on domestic ASP websites. Their differences are only in the different implementation techniques. The implementation of these two methods is the easiest to understand, the least object concept is used, and the minimum requirements for the development environment (just just notepad). It can be said that the essence of these two methods is still the programming idea of ​​CGI, which is just introducing ADO objects into the program.

The fourth and fifth DHTML methods temporarily named SOM.

These two methods require the use of Microsoft's script object model (Script Object Model) and the new features of the database binding of Table objects in DHTML in VI6.0 (many books and articles only introduce the CSS features of DHTML The application in style design ignores the introduction of its data binding characteristics, and realizes page turnover on the client side. However, it requires that the user's browser must support DHTML, such as: Microsoft Internet Explorer 4.0 and above.

The sixth method is temporarily named SOM server-side method.

It requires development in the VI6.0 environment, which uses several DTC controls in the script object model proposed by Microsoft: Recordset, PageObject, Grid, etc. to implement page turn control on the server side (client). This is an exciting and new programming method that treats web pages as objects (this object model is different from the traditional DOM----document object model: DOM can only control the client, while SOM can Controls the server side and the client side), which truly implements object-oriented programming of web pages. But unfortunately, maybe my personal ability is limited, and I personally think this technology is not very mature yet. For example, the combination with the browser is not very good, which will be explained in detail later.

The seventh method is temporarily named DEOM method.

It also uses the Data Environment Object Model established in VI6.0 to create Recordset objects. This is also a relatively rare new method in web programming. Compared with the SOM model, it has its own advantages, which will be described in detail later.

All the source codes mentioned later can be copied and used directly. You may not even understand the principle. Just replace the bold italic part with the corresponding database name or field name.

Before we start introducing various paging methods in detail, let’s create a database: use access in Office97 to create a Employee.mdb, which creates a table emp, and sets only three fields: emp ID, last name and first name. Why is that simple? It is because we care about how to deal with the results of recordset.

The first method of substituting parameters directly

This method is to manually create a Recordset object, and use its pagesize (specify the number of records displayed per page), pagecount (total page number) and absolutepage (current page number) properties to control the output of the page. The page paging uses the method of directly page numbering parameters to control page turnover. The name of the web page is emp1.asp. The source code is as follows:

  1. ＜%// Establish a connection to the employee.mdb database.
  2. Setconn=Server.CreateObject(ADODB.Connection)
  3. conn.Opendriver={Microsoft AccessDriver(*.mdb)};dbq=employee.mdb
  4. //Create an instance of the Recordset object of the emp table.
  5. Setrs=Server.CreateObject(ADODB.Recordset)
  6. rs.Openemp,conn,3
  7. PageSize=10//pagesize attribute specifies the number of records to be displayed on each page.
  8. Page=CLng(Request(Page))'string type converted to long type
  9. IfPage＜1ThenPage=1
  10. IfPage>rs.PageCountThenPage=rs.PageCount
  11. IfPage＜＞1Then
  12. Response.Write＜AHREF=emp1.asp?Page=1＞Page1＜/A＞
  13. Response.Write＜AHREF=emp1.asp?Page=&(Page-1)&＞Previous page＜/A＞
  14. EndIf
  15. IfPage＜＞rs.PageCountThen
  16. Response.Write＜AHREF=emp1.asp?Page=&(Page+1)&＞Next page＜/A＞
  17. Response.Write＜AHREF=emp1.asp?Page=&rs.PageCount&＞Last page＜/A＞
  18. EndIf
  19. Response.write page number: &Page&/&rs.PageCount&＜/font＞
  20. //Display of each page
  21. //Show the header
  22. Response.Write＜CENTER＞＜TABLEBORDER=1＞
  23. Response.WRITE＜TR＞＜TD＞&rs.Fields(empID).Name&＜/TD＞
  24. Response.WRITE＜TD＞&rs.Fields(lastname).Name&＜/TD＞
  25. Response.WRITE＜TD＞&rs.Fields(firstname).Name&＜/TD＞＜/TR＞
  26. //Cycle the display of each record
  27. rs.AbsolutePage=Page// Assign the page number to the absolutepage attribute to know the first record number of the current page
  28. ForiPage=1Tors.PageSize//
  29. Response.WRITE＜TR＞＜TD＞&rs.Fields(empID).Value&＜/TD＞
  30. Response.WRITE＜TD＞&rs.Fields(firstname).Value&＜/TD＞
  31. Response.WRITE＜TD＞&rs.Fields(lastname).Value&＜/TD＞＜/TR＞
  32. rs.MoveNext
  33. Ifrs.EOFTThenExitFor
  34. Next
  35. Response.Write＜/TABLE＞＜/CENTER＞%＞

The second type: form transfer parameter method

This method is the same as the first when creating a Recordset object, except that when page turning control, it uses a case statement to achieve page turning. The name of the web page is: emp2.asp. This method has a disadvantage in programming logic: it will automatically turn the page after pressing the previous page or next page button and then pressing the refresh button on the browser. The source code is as follows:

  1. ifPagenum=ThenPagenum=1//Show from the first page
  2. //Create database connection and Recordset object instance rs.
  3. Same as the first method, skipped here.
  4. RS.Pagesize=10'Set the number of records displayed on a page to 10
  5. //Confirm the page turn action
  6. SelectCaseRequest(NAV)
  7. Case
  8. session(Pagenum)=1
  9. caseFirst'FirstRecord
  10. session(Pagenum)=1
  11. casePrev'PreviousRecord
  12. ifsession(Pagenum)>1then
  13. session(Pagenum)=session(Pagenum)-1
  14. EndIf
  15. caseNext'NextRecord
  16. ifsession(Pagenum)＜RS.PageCountthen
  17. session(Pagenum)=session(Pagenum)+1
  18. Endif
  19. caseLast'LastRecord
  20. session(Pagenum)=RS.PageCount
  21. EndSelect
  22. RS.Absolutepage=Clng(session(Pagenum))//Determine the first record number of the current page
  23. //Show the current page
  24. Same as the first method, skip it here.
  25. //Nav page turn button settings
  26. ＜formmethod=GETaction=emp2.asp＞
  27. ＜inputtype=submitname=NAVValue=Home>
  28. ＜inputtype=submitvalue=Previous page name=NAV＞
  29. ＜inputtype=submitvalue=next page name=NAV＞
  30. ＜inputtype=submitvalue=last page name=NAV＞＜/form＞

The third type: Use Grid control to design paging

Of all the methods, this method is the easiest. You just need to drag the Recordset control and Grid control in DTC to the asp web page. Moreover, you can also choose whether to control page turnover on the server platform or on the client platform. The disadvantage is that you must display it in the format given by it, and you cannot control the display format of the table by yourself.

The method is as follows:

Build a project emp.vip in VI6.0. Then add an asp web page in the project: emp3.asp.

Step 1: Select add data connect… on the VI6.0 menu bar, and follow the navigation prompts of the development tool, and you can easily establish a connection to the Employee.mdb database. Drag a Recordset control from the DTC toolbar to the web page and set its properties. Specific as shown in the picture:

When you drag the control into the web page, VI6.0 will automatically prompt you whether to use the Scripting object model and press yes.

Step 3: Drag a Grid control from the DTC toolbar into the web page, then right-click to set its properties, such as: select the Recordset control name created in the second step, select the fields in the emp table, and each page How many records are displayed and the display format, etc. It's very simple and convenient, just follow the navigation prompts.

The fourth type: DHTML method one.

Data records are displayed in an HTML table. It uses the data binding characteristics of tables in DHTML to control the pagination display of records. The disadvantage is that your page turn method will be limited to a specific method: only the previous page and the next page, but not the home page and the last page. Since it is controlled on the client side, this and the fifth method are the fastest, but unfortunately it can only be used on browsers that support DHTML.

In DHTML,

The DATASRC property allows the table to be bound to a data source, and the other property DATAPAGESIZE specifies the number of records displayed on a page at a time.

Let's look at the following example:

Step 1: Drag the Recordset control to the newly created web page emp4.htm and set its properties. The method is the same as the third one, omitted here.

Step 2: Enter the following code:

  1. ＜TABLEID=Table1DATASRC=#Recordset1_RDSDATAPAGESIZE=5＞//Assuming that the Recordset control name is Recordset1 before is set. 5 records are displayed per page.
  2. ＜THEAD＞
  3. ＜THALIGN=leftWIDTH=150＞EmpID＜/TH＞//Output table header
  4. ＜THALIGN=leftWIDTH=200＞LastName＜/TH＞
  5. ＜THALIGN=leftWIDTH=200＞FirstName＜/TH＞
  6. ＜/THEAD＞
  7. ＜TR＞
  8. ＜TD＞＜DIVDATAFLD=EmpID＞＜/DIV＞＜/TD＞//Output table content
  9. ＜TD＞＜DIVDATAFLD=LastName＞＜/DIV＞＜/TD＞
  10. ＜TD＞＜DIVDATAFLD=FirstName＞＜/DIV＞＜/TD＞
  11. ＜/TR＞
  12. ＜/TABLE＞

Step 3: Then, add a pair of DTCs Button button controls to do page turn navigation, one named btnPrevious (previous page) and the other named btnNext (next page). Their corresponding scripts are as follows:

  1. ＜SCRIPTLANGUAGE=VBScript＞
  2. FunctionbtnPrevious_onclick()
  3. Table1.previousPage()
  4. EndFunction
  5. FunctionbtnNext_onclick()
  6. Table1.nextPage()
  7. EndFunction
  8. ＜/SCRIPT＞

Fifth type: DHTML method two

This method is a perfection for the fourth method. The manual scripting method allows us to make the home page and last page turn navigation buttons, and to determine the location of each record (record number). Due to the length, I will only introduce one specific example below and give a brief explanation. For other properties and methods of DHTML and Recordset controls, please refer to relevant books by yourself. It should be noted here that the Recordset control is somewhat different from the ADO Recordset object introduced in the first and second methods: the Recordset control does not directly give properties such as pagesize and pagecount, and needs to be calculated using the method introduced below.

Step 1: Drag the Recordset control to the newly created web page emp5.htm, with the name Recordset1, and set its properties. The method is the same as the third one, omitted here.

Step 2: Define three global variables and write the ondatasetcomplete script of Recordset1.

  1. DimgCurrentPageNumber//Current page number
  2. DimgMaxPageNumber//Maximum number of pages
  3. DimgRecordsPerPage//Number of records displayed per page
  4. gRecordsPerPage=5//Set the number of records displayed per page to 5 records.
  5. FunctionRecordset1_ondatasetcomplete()
  6. totalRecordCount=Recordset1.getCount()//Total number of records
  7. gMaxPageNumber=Int(totalRecordCount/gRecordsPerPage)//Get maximum number of pages
  8. If(totalRecordCountModgRecordsPerPage)＞0then
  9. gMaxPageNumber=gMaxPageNumber+1
  10. EndIf
  11. EndFunction

Step 3: Create a page turn navigation button.

  1. FunctionbtnFirst_onclick()'Flip to homepage
  2. gCurrentPageNumber=1
  3. DisplayData()
  4. EndFunction
  5. FunctionbtnPrevious_onclick()'Flip to the previous page
  6. ifgCurrentPageNumber>1Then
  7. gCurrentPageNumber=gCurrentPageNumber-1
  8. DisplayData()
  9. EndIf
  10. EndFunction
  11. FunctionbtnNext_onclick()'Flip to the next page
  12. ifgCurrentPageNumber＜gMaxPageNumberThen
  13. gCurrentPageNumber=gCurrentPageNumber+1
  14. DisplayData()
  15. EndIf
  16. EndFunction
  17. FunctionbtnLast_onclick()'Flip to the last page
  18. gCurrentPageNumber=gMaxPageNumber
  19. DisplayData()
  20. EndFunction

Step 4: Write a function that displays each page. Many DHTML properties and methods are used, please refer to relevant books by yourself.

  1. SubDisplayData()
  2. startRecord=((gCurrentPageNumber-1)*gRecordsPerPage)+1//Calculate the number of records displayed at the beginning of each page (position, which item)
  3. rowCtr=1
  4. lblPageNumber.innerHTML=gCurrentPageNumber&/&gMaxPageNumber
  5. ForrecordPtr=startRecordTo(startRecord+gRecordsPerPage-1)//Cycling to display each record on a page
  6. IfrecordPtr＞Recordset1.getCount()Then//Show empty table
  7. Table1.rows(rowCtr).cells(0).innerHTML=＜P＞＜/P＞
  8. Table1.rows(rowCtr).cells(1).innerHTML=＜P＞＜/P＞
  9. Table1.rows(rowCtr).cells(2).innerHTML=＜P＞＜/P＞
  10. Table1.rows(rowCtr).cells(3).innerHTML=＜P＞＜/P＞
  11. Else//Specify each page
  12. Recordset1.moveAbsolute(recordPtr)//Move the record pointer.
  13. empID=Recordset1.fields.getValue(empID)
  14. empLName=Recordset1.fields.getValue(firstname)
  15. empFName=Recordset1.fields.getValue(lastname)
  16. Table1.rows(rowCtr).cells(0).innerText=recordPtr'Counter
  17. Table1.rows(rowCtr).cells(1).innerText=empID
  18. Table1.rows(rowCtr).cells(2).innerText=empLName
  19. Table1.rows(rowCtr).cells(3).innerText=empFName
  20. EndIf
  21. rowCtr=rowCtr+1
  22. Next
  23. EndSub

In addition, we also need to write the following script in the onload event of the window object:

  1. ForrowCtr=1togRecordsPerPage
  2. Table1.insertRow(rowCtr)' insert a new column
  3. ForcellCtr=0to3
  4. Table1.rows(rowCtr).insertCell()
  5. Next
  6. Next

The sixth method: server-side control page turnover.

If we paginate the data on the server and then output it to the client, there will be no problem that the browser does not support DHTML. However, using the server-side method makes us have to regenerate the Recordset control every time we turn the page, so the speed is definitely slower than using DHTML method. But if the server is fast enough, the slowness of the customer will not notice.

In the following example, I will introduce a new DTC control: PageObject. This control makes the specified web page an object, and the subroutines and functions organized by the user in the server script of the web page can be regarded as methods of the web page object. It provides an advanced method for managing state information: web objects have some properties (variables) that users can define the lifetime of these properties. Because of the above features, it makes it very convenient for us to compile page-turning scripts.

But the disadvantage of this method is: when you press the previous page or next page button and then press the refresh button on the browser, the web page will automatically turn pages. In addition, if you press the fallback button on the browser and then press the page turn button, you may turn it around randomly. This is all caused by web object properties (global variables).

Step 1: Drag the Recordset control to the newly created web page emp6.asp, with the name Recordset1, and set its properties. The method is the same as the third one, omitted here.

Step 2: Drag the PageObject control to the web page and name it emplist. Then right-click this control to open the property page and set three properties (global variables) of MaxPageNumber, RecordsPerPage, and CurrentPageNumber. VI6.0 can use get and set methods to read and write their values. For specific usage, please refer to the relevant information.

Step 3: Write the ondatasetcomplete event of Recordset1.

  1. FunctionRecordset1_ondatasetcomplete()
  2. recordsPerPage=5
  3. empList.setRecordsPerPage(recordsPerPage)//Set the web page object record number per page attribute to 5
  4. totalRecordCount=Recordset1.getCount()//Get the total number of recordsets
  5. mpn=Int(totalRecordCount/recordsPerPage)//Calculate mpn as the total number of pages
  6. If(totalRecordCountModrecordsPerPage)＞0then
  7. mpn=mpn+1
  8. EndIf
  9. empList.setMaxPageNumber(mpn)
  10. EndFunction

Step 4: Drag four button controls into the web page and write a page turn control script. We mainly realize page turn by changing the value of the CurrentPageNumber property of the web page object.

  1. FunctionbtnFirst_onclick()'Flip to homepage
  2. empList.setCurrentPageNumber(1)
  3. EndFunction
  4. FunctionbtnPrevious_onclick()'Flip to the previous page
  5. cpn=empList.getCurrentPageNumber()
  6. ifcpn＞1Then
  7. empList.setCurrentPageNumber(cpn-1)
  8. EndIf
  9. EndFunction
  10. FunctionbtnNext_onclick()'Flip to the next page
  11. cpn=empList.getCurrentPageNumber()
  12. ifcpn＜empList.getMaxPageNumber()then
  13. empList.setCurrentPageNumber(cpn+1)
  14. EndIf
  15. EndFunction
  16. FunctionbtnLast_onclick()'Flip to the last page
  17. empList.setCurrentPageNumber(empList.getMaxPageNumber())
  18. EndFunction

To ensure that the first page is displayed when entering the page for the first time, we have to write the onEnter event of the web page object.

  1. FunctionempList_onEnter()
  2. IfempList.firstEnteredThen
  3. empList.setCurrentPageNumber(1)
  4. EndIf
  5. EndFunction
  6. Step 5: Write a script that displays each page.
  7. ＜HR＞＜TABLEBORDER=0＞＜TR＞//Display the header
  8. ＜THALIGN=leftWIDTH=35＞＜/TH＞
  9. ＜THALIGN=leftWIDTH=150＞EmpID＜/TH＞
  10. ＜THALIGN=leftWIDTH=200＞LastName＜/TH＞
  11. ＜THALIGN=leftWIDTH=200＞FirstName＜/TH＞＜/TR＞
  12. ＜%
  13. pageNumber=empList.getCurrentPageNumber()// Calculate various parameters required for page turn, same as DHTML method two
  14. recordsPerPage=empList.getRecordsPerPage()
  15. startRecord=((pageNumber-1)*recordsPerPage)+1
  16. lastRecord=Recordset1.getCount()
  17. ForrecordPtr=startRecordTo(startRecord+recordsPerPage-1)%＞
  18. ＜%IfRecordset1.EOF=TrueThen%＞
  19. ＜TR＞
  20. ＜TD＞＜/TD＞
  21. ＜TD＞＜/TD＞
  22. ＜TD＞＜/TD＞
  23. ＜TD＞＜/TD＞
  24. ＜/TR＞
  25. ＜%Else%＞
  26. ＜%Recordset1.moveAbsolute(recordPtr)%＞
  27. ＜TR＞
  28. ＜%IfrecordPtr＜=lastRecordThen%＞
  29. ＜TD＞＜%=recordptr%＞＜/TD＞
  30. ＜%Else%＞
  31. ＜TD＞＜/TD＞
  32. ＜%EndIf%＞
  33. ＜TD＞＜%=Recordset1.fields.getValue(empID)%＞＜/TD＞
  34. ＜TD＞＜%=Recordset1.fields.getValue(lastname)%＞＜/TD＞
  35. ＜TD＞＜%=Recordset1.fields.getValue(firstname)%＞＜/TD＞
  36. ＜/TR＞
  37. ＜%EndIf%＞
  38. ＜%Next%＞
  39. ＜/TABLE＞＜HR＞

The seventh type: Data Environment Object Model method

The Data Environment object model abstracts the ADO object model and its objects - Connection, Command, Recordset, Field and Parameter objects - into an easier form. Data Environment Object Model reveals commands as methods. The user can call these methods, which execute these commands and return the resulting record set. For detailed information on DEOM object model, please refer to relevant books. Let's take a look at the following example of emp7.asp:

Step 1: Right-click the mouse on the project in the project Explorer window of VI6.0 and select Add Data Connection from the pop-up menu. After establishing a connection to the database according to the navigation prompts given by the VI, the user adds a data command to access the database from the ASP application. At the same time, you will see a Data Environment object under the global.asa file in the Project Explorer window.

Step 2: Right-click the Data Environment object and select the Add Data Command option from the pop-up menu to add a data command Command1. According to the navigation prompts of VI6.0, you can select SQL Statement in the Genetal page of the Command1 Properties pop-up window and enter: select * from emp. Press OK to return.

Step 3: After you create this data command, you have created a method for the Data Environment object, and then you can call this method from the script, and the method will return a record set to the user.

thisPage.createDE() //In SOM mode, thisPage represents the current web page object, and the createDE() method creates the DE object.

DE.Command1//Execute the command of the DE object, which can be used as a parameter later, which is very useful when doing conditional queries.

Set rs=DE.rsCommand1//DE.rscommand1 makes the rs object completely equivalent to an ADO Recordset object.

Step 4: Because rs is an ADO object, the following implementation page turn code completely refers to the methods introduced above, and is skipped here.

Other methods such as those implemented in database navigation in FrontPage2000 are not related to this topic, so here is omitted.

To sum up, each method introduced above contains many new technologies, which cannot be penetrated due to length. This article just wants to introduce various methods of ASP web programming through the specific example of page turning; let everyone experience the powerful functions of VI6.0 in compiling web pages for personal experience; understand and familiarize themselves with the ADO proposed by Microsoft in web page programming; How to use DHTML, DTC control, SOM object model and DEOM object model; I hope it can provide you with more choices and references when compiling web pages.

Related Articles