Click here to Skip to main content
15,887,027 members
Articles / Web Development / HTML
Article

GridView / DataList Paging Control

Rate me:
Please Sign up or sign in to vote.
4.88/5 (13 votes)
24 Sep 2008CPOL 89.7K   1.5K   32   40
Simple custom paging with an ASCX control, where the developer can easily edit the stylesheet.

DataControl_PagingControl

Introduction

This is a custom paging control for data controls (GridView / DataList / Repeater). From this control, developers can easily add custom paging on a data control.

Using the code

It is very simple to add custom paging on a data control. Please add the DLL (App_Web_pagingcontrol.ascx.cdcab7d2.dll) in the bin directory and PagingControl.ascx in the root directory.

Here is the ASPX code:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Default.aspx.cs" Inherits="GridView_Default" %>

<%@ Register Src="PagingControl.ascx" 
   TagName="PagingControl" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
        <style type="text/css">
          .paging-div
            {font-size: 9px; position:relative;
            text-align:left;color:rgb(128, 128, 128);margin-bottom:10px; 
            margin-top:10px; line-height:100%; font-family:Verdana;}
          .paging-div div
            {font-size: 9px; font-weight: normal; 
            display:inline;list-style:none;text-align:center; 
            margin:2px; font-family:Verdana;}
          .paging-div div span
            {font-size: 9px; font-weight: normal; 
            color: #CC0000; border: 1px #CC0000 solid; 
            padding: 3px 6px 3px 6px; font-family:Verdana;}
          .paging-div div a
            {font-size: 9px; font-weight: normal; 
            color: #000000; border: 1px #CDDCED solid; 
            padding: 3px 6px 3px 6px; 
            font-family:Verdana; text-decoration: none;}
          .paging-div div a:hover
            {font-size: 9px; font-weight: normal; 
            color: #FFFFFF; border: 1px #000000 solid; 
            padding: 3px 6px 3px 6px; font-family:Verdana;
            background-color: #5F8FC5; text-decoration: none;}
          .paging-div .nav
            {font-size: 9px; font-weight: normal; 
            color: #CCCCCC; border: 1px #CCCCCC solid; 
            padding: 3px 6px 3px 6px; font-family:Verdana;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table cellpadding="0" cellspacing="0" 
                      width="100%" border="0">
                <tr>
                    <td>
                        <uc1:PagingControl ID="Paging1" 
                           OnPaging_Click="Paging_Click" 
                           FirstString="<< First" 
                           LastString=" Last >>" 
                           NextString="Next >" 
                           PrevString="< Prev" 
                           TotalNumberPaging="5"  
                           runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:GridView ID="grdTest" 
                            runat="server" 
                            AutoGenerateColumns="true" 
                            AllowPaging="true"
                            PageSize="5" 
                            PagerSettings-Visible="false">
                        </asp:GridView>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Here is the code (.cs) file:

C#
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Sindhu;
public partial class GridView_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataLoad();
        }
    }

    public void DataLoad()
    {
        DataSet DS = new DataSet();
        DS=GetData();

        // in case  of datagrid / gridview
        Paging1.PageSize = grdTest.PageSize;
        Paging1.TotalRecord = DS.Tables[0].Rows.Count;
        Paging1.CurrentPage = grdTest.PageIndex + 1;
        Paging1.DataLoad();

        // in case of data list /  repeater
        /*
        DataSet DS1 = new DataSet();
        int TotalRecords = DS.Tables[0].Rows.Count;
        int PageSize = 1;

        int StartIndex = 0;
        int EndIndex = 0;
        StartIndex = 
          Convert.ToInt32(Convert.ToInt32(PageIndex)) * PageSize;
        EndIndex = StartIndex + PageSize;
        int inti = 0;

        for (inti = StartIndex; inti < EndIndex 
             && inti < DS.Tables[0].Rows.Count; inti++)
        {
            if (inti == StartIndex)
            {
                DS1.Tables.Add();
                for (int i = 0; i < DS.Tables[0].Columns.Count; i++)
                {
                    DS1.Tables[0].Columns.Add(
                       DS.Tables[0].Columns[i].ColumnName);
                }
            }
            DataRow dr = DS1.Tables[0].NewRow();
            for (int i = 0; i < DS.Tables[0].Columns.Count; i++)
            {
                dr[DS.Tables[0].Columns[i].ColumnName] = 
                   DS.Tables[0].Rows[inti][i].ToString();
            }
            DS1.Tables[0].Rows.Add(dr);
        }
        DS1.Tables[0].AcceptChanges();
        Paging1.PageSize = PageSize;
        Paging1.TotalRecord = TotalRecords;
        Paging1.CurrentPage = PageIndex + 1;
        Paging1.DataLoad();
        */

        grdTest.DataSource = DS.Tables[0].DefaultView;
        grdTest.DataBind();
    }

    public DataSet GetData()
    {
        DataSet DS = new DataSet();
        SqlConnection Conn = new SqlConnection("Data Source=shradha;" + 
                      "Initial Catalog=Sindhu;user id=sa;password=nitin");
        SqlCommand Comm = new SqlCommand("select * from tbl_Author", Conn);
        SqlDataAdapter AD = new SqlDataAdapter();
        AD.SelectCommand = Comm;
        AD.Fill(DS);
        return DS;
    }
    public void Paging_Click(object sender, CommandEventArgs e)
    {
        string CurrentPage = e.CommandArgument.ToString();
        grdTest.PageIndex = Convert.ToInt32(CurrentPage) - 1;
        DataLoad();
    }
}

Please download the sample project to see a demo.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Product Manager
India India
Nitin Kr Sindhu is a Master of Computer Application(MCA).
He is working with .Net technologies in web development since 2004.
Working in various languages like C#, VB.NET and Use Database with Access & MS SQL Server
with Javascript, AJAX, ASP.NET.

Comments and Discussions

 
GeneralRe: I need this for datalist and datagrid Pin
ibdtd11-Nov-11 23:42
ibdtd11-Nov-11 23:42 
Generali need the this for datalist Pin
subathral14-May-09 16:40
subathral14-May-09 16:40 
GeneralMissing code Pin
cyh_cyh12-May-09 4:07
cyh_cyh12-May-09 4:07 
GeneralNice article............. Pin
Najmul Hoda31-Mar-09 0:20
Najmul Hoda31-Mar-09 0:20 
QuestionEquivalent Keyword for Server.MapPath in Javascript Pin
Murugan Kolanji9-Dec-08 3:14
Murugan Kolanji9-Dec-08 3:14 
QuestionVB.NET and Repeater paging [modified] Pin
amir_3d_mad6-Dec-08 20:08
amir_3d_mad6-Dec-08 20:08 
QuestionPaging not work in Datalist Pin
sasikanna14-Nov-08 5:19
sasikanna14-Nov-08 5:19 
AnswerRe: Paging not work in Datalist Pin
Nitin Sindhu20-Nov-08 19:47
professionalNitin Sindhu20-Nov-08 19:47 
GeneralRe: Paging not work in Datalist Pin
TZEM15-Dec-08 4:15
TZEM15-Dec-08 4:15 
GeneralRe: Paging not work in Datalist Pin
Nitin Sindhu22-Dec-08 1:23
professionalNitin Sindhu22-Dec-08 1:23 
GeneralRe: Paging not work in Datalist Pin
pritesh.cs@gmail.com6-Aug-09 22:30
pritesh.cs@gmail.com6-Aug-09 22:30 
Questioncan you provide you code? Pin
JLKEngine00830-Sep-08 0:42
JLKEngine00830-Sep-08 0:42 
AnswerRe: can you provide you code? Pin
Nitin Sindhu30-Sep-08 20:52
professionalNitin Sindhu30-Sep-08 20:52 
GeneralPaging Pin
obinna_eke29-Sep-08 3:04
obinna_eke29-Sep-08 3:04 
GeneralRe: Paging Pin
Nitin Sindhu29-Sep-08 7:12
professionalNitin Sindhu29-Sep-08 7:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.