Using C1Pager with ASP.NET DataList Control

In this article we use the standard ASP.NET DataList control and learn how we can implement paging in it using C1Pager.

The first thing we need is to set up a datasource for the DataList. In this example we are creating a DataSet using an OleDb datasource. An important thing to note in this implementation is that once the dataset is created, we will assign it to a PagedDataSource. This is required to assign a fixed number of records for each page. Here is how we will set this up:

OleDbDataAdapter dadapter;  
DataSet dset;  
PagedDataSource adsource;  
string connstring = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath("~/App_Data/NWIND.mdb") + ";Persist Security Info=False";  
int pos;  
int pageCount = 0;  

protected void Page_Load(object sender, EventArgs e)  
{  
   if (!IsPostBack)  
   {  
      this.ViewState["vs"] = 0;  
   }  
   pos = (int)this.ViewState["vs"];  
   DataBind();  
   C1Pager1.PageCount = pageCount;  
   C1Pager1.Mode = C1.Web.Wijmo.Controls.C1Pager.PagerMode.Numeric;  
}

And this is how the DataBind function looks like:

public void DataBind()  
{  
   dadapter = new OleDbDataAdapter("SELECT TOP 20 CompanyName, City, Country FROM Customers", connstring);  
   dset = new DataSet();  
   adsource = new PagedDataSource();  
   dadapter.Fill(dset);  
   adsource.DataSource = dset.Tables[0].DefaultView;  
   adsource.PageSize = 5;  
   adsource.AllowPaging = true;  
   adsource.CurrentPageIndex = pos;  
   DataList1.DataSource = adsource;  
   DataList1.DataBind();  
   pageCount = Convert.ToInt32(dset.Tables[0].Rows.Count / adsource.PageSize);  
}

Now everything is set up except for the handling of page change in the C1Pager. To do this, we will use the PageIndexChanged event of the C1Pager. This is how the code should look like:

protected void C1Pager1_PageIndexChanged(object sender, EventArgs e)  
{  
   int currPage = C1Pager1.PageIndex;  
   pos = (int)this.ViewState["vs"];  
   pos += currPage;  
   this.ViewState["vs"] = pos;  
   DataBind();  
   pos = 0;  
   this.ViewState["vs"] = 0;  
}

So everything is set up and we are good to go. Everytime we select a different page on the pager, the related set of records will be fetched using the PagedDataSource and will be displayed on the DataList.