Building a Custom ASP.NET Ajax Enabled Grid Using JavaScript
page 4 of 9
by Mudassar Ahmed Khan
Average Rating: 
Views (Total / Last 10 Days): 43138/ 67

Creating the Pager for the Grid

This function, as the name suggests, creates the pager for our HTML Grid. It accepts the following Parameters:

intRowCount – Total No of Records in the DataView

intPageNo – Current Page Index

intRowsPerPage – Number of Records Per Page

intPageSet – Index of the Current Page

Here you will notice that I have used a word called PageSet. It is a set of Pages in the pager .

Figure 1

The above figure refers to a PageSet with index 1. It is showing 10 Pages since I have set the intPagesPerSet to 10.

First, I am calculating the total number for pages for the current set of data. This is done by dividing the Total Number of Records with the Number of records per Page

Listing 9

dblPageCount = Convert.ToDecimal(intRowCount) / Convert.ToDecimal(intRowsPerPage)
intPageCount = Convert.ToInt32(Math.Ceiling(dblPageCount)) 

Then I am calculating the start page index and the end page index of the PageSet based on the intPageSet and the intPagesPerSet. Note that I have set the Pages per Set to 10. This means that on the Grid I will see Page Numbers 1 to 10, in the next set 11 to 20 and so on.

Listing 10

intPagesPerSet = 10
intStartPage = ((intPageSet - 1) * intPagesPerSet) + 1
intEndPage = intPageSet * intPagesPerSet

As you can see, I am creating an HTML markup here too, using a String builder which we will be binding to the dvPager. See the complete function below.

Listing 11

Private Function Pager(ByVal intRowCount As Integer, ByVal intPageNo As Integer, _
  ByVal intRowsPerPage As IntegerByVal intPageSet As IntegerAs String
        Dim strResults As New StringBuilder
        Dim intPageCount As Integer
        Dim dblPageCount As Double
        intPageCount = Convert.ToInt32(Math.Ceiling(dblPageCount))
        If intPageNo > intPageCount Or intPageNo < 1 Then
            intPageNo = 1
        End If
        Dim intStartPage, intEndPage, intPagesPerSet As Integer
        intPagesPerSet = 10
        intStartPage = ((intPageSet - 1) * intPagesPerSet) + 1
        intEndPage = intPageSet * intPagesPerSet
        If intEndPage > intPageCount Then
            intEndPage = intPageCount
        End If
        If intPageSet > 1 Then
            strResults.Append( _
              "<a href = 'javascript:;' onclick = 'PrepareRequest(")
            strResults.Append(intStartPage - intPagesPerSet)
            strResults.Append(", ")
            strResults.Append(intPageSet - 1)
            strResults.Append(")' class='pager'><<<</a>&nbsp;")
        End If
        For k As Integer = intStartPage To intEndPage
            If k = intPageNo Then
                strResults.Append("<span class='pager'>")
                strResults.Append( _
                  "<a href = 'javascript:;' onclick = 'PrepareRequest(")
                strResults.Append(", ")
                strResults.Append(")' class='pager'>")
                Dim str As String = strResults.ToString
            End If
        If intPageCount > intEndPage Then
            strResults.Append( _
              "<a href = 'javascript:;' onclick = 'PrepareRequest(")
            strResults.Append(intEndPage + 1)
            strResults.Append(", ")
            strResults.Append(intPageSet + 1)
            strResults.Append(")' class='pager'>>>></a>")
        End If
        Return strResults.ToString()
End Function

View Entire Article

User Comments

Title: wow   
Name: Sue
Date: 2012-10-11 3:05:48 PM
what a great code! Thanks
Title: m,n   
Name: mn,mn
Date: 2012-08-31 8:55:59 AM
Title: Excellent   
Name: Soons
Date: 2010-02-13 12:45:27 AM
The example was very simple and informative..
Thanks for the good work
Title: Small Problem   
Name: IndSoft
Date: 2009-08-30 10:12:21 AM
Good work, im also tried this it was work for me, but my problem is i need to edit the record using ajax (Not using UpdatePanel in VS)what is best way to do that.

note-when i click edit link, it should take particular record to separate web control (textboxes).
Title: RE i did upgrade it to 3.5   
Name: Mudassar Khan
Date: 2009-03-15 1:00:13 AM
You ahould review the code after the upgrade. Since cannot say what has changed in that. You can checkout whether the data is assigned to div or not.
Title: ???   
Date: 2009-03-14 7:34:38 PM
i did upgrade it to 3.5
Title: ???   
Date: 2009-03-14 7:34:04 PM
I tried it in Visual Studio 2008 and it did compile, but didn't show any data in the latest version of firefox

Title: good work   
Name: ajax helper
Date: 2009-02-06 5:16:16 PM
http:// good work

ajax forum
Title: Awesome!   
Name: ajax learner
Date: 2009-02-06 5:15:12 PM
super work!
Title: Good work   
Name: Muhsin
Date: 2009-02-04 5:09:07 AM
Excellent tutorial for people who wants to understand how things work behind the scenes
Title: Excellent Effort   
Name: Raghav Khunger
Date: 2009-01-30 7:59:03 AM
This Is A Excellent Control .The Most Beautiful thing i like that everything is without postback.
The Sorting Criteria as well as Paging is without postback.
U have Given windows programming like feeling.Wow!
Title: RE: Why Should I use this way ?!!   
Name: Mudassar Khan
Date: 2009-01-30 3:54:35 AM
1. Learn what goes behind the scenes in these controls
2. Customization - I can customize the grid as I want.
3. Also a brief idea on how to do the same using Javascript.
Title: Why Should I use this way ?!!   
Name: .NET Developer
Date: 2009-01-30 3:23:42 AM
really nice code, but why should we use that? we already have a gridview and ajax extensions!
In visual studio 2008, we have a new DataBound control called "ListView" and "DataPager" will do the work of this articel without the need to write any bit of code!

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-07-25 11:18:49 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search