I have seen many articles for DataList custom paging, everyone showing paging in the DataList when the image is coming from a database. My requirement was for paging in a DataList when the image is coming from a folder.
This article demonstrates how to create custom paging for DataList control when the image is coming from a folder.
Step 1:
Design a Form; drag a DataList Control from the toolbox. Set the Repeated Column property and design the DataList control as you require. Add link buttons for next, prev, first and last images.
  1. <asp:DataList ID="DataList1" runat="server" RepeatColumns="4" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" Width="100% onselectedindexchanged=" DataList1_SelectedIndexChanged">
  2. <FooterStyle BackColor="#CCCCCC" />
  3. <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
  4. <HeaderTemplate>
  5. <span class="style2">Image Gallary</span>
  6. </HeaderTemplate>
  7. <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
  8. <ItemTemplate>
  9. <asp:ImageButton Width="105px" ID="Image1" runat="server" BorderStyle="Solid" ImageUrl='<%# Bind("Name", "~/[foldername]/{0}") %>' CommandName="Image" CommandArgument='<%# Bind("Name") %>' Height="94px" />
  10. <br />
  11. <asp:Label ID="lblImg" Text='<%# Bind("Name") %>' runat="server" Visible="false" />
  12. <br />
  13. </ItemTemplate>
  14. <FooterStyle BackColor="White" ForeColor="#333333" />
  15. <ItemStyle BorderColor="Silver" BorderStyle="Dotted" BorderWidth="1px" HorizontalAlign="Center" VerticalAlign="Bottom" BackColor="White" ForeColor="#333333" />
  16. </asp:DataList>
  17. <asp:LinkButton ID="btnNext" runat="server" CausesValidation="False" onclick="btnNext_Click">Next ></asp:LinkButton>
  18. <asp:LinkButton ID="btnFirst" runat="server" CausesValidation="False" onclick="btnFirst_Click"><< First
  19. </asp:LinkButton>
  20. <asp:LinkButton ID="btnPrev" runat="server" CausesValidation="False" onclick="btnPrev_Click"><
  21. Prev</asp:LinkButton>
  22. <asp:LinkButton ID="btnLast" runat="server" CausesValidation="False" onclick="btnLast_Click">Last
  23. >></asp:LinkButton>
Step 2:
Write the following code...
  1. using System;
  2. using System.Collections;
  3. using System.Configuration;
  4. using System.Data;
  5. using System.IO;
  6. using System.Web;
  7. using System.Web.Security;
  8. using System.Web.UI;
  9. using System.Web.UI.HtmlControls;
  10. using System.Web.UI.WebControls;
  11. using System.Web.UI.WebControls.WebParts;
  12. using System.Xml.Linq;
  14. public partial class Gallary: System.Web.UI.Page {
  15. int cnt; //count the total records
  16. int cntitem = 0; //for counting item in list
  17. decimal last1; // access the last record
  18. PagedDataSource pagedData = new PagedDataSource();
  19. protected void Page_Load(object sender, EventArgs e) {
  20. if (!IsPostBack) {
  22. BindImage();
  24. }
  25. }
  27. private ArrayList ListImages() {
  28. cntitem = 0;
  30. DirectoryInfo dir = new DirectoryInfo(MapPath("~/ThumbnailImage"));
  31. FileInfo[] file = dir.GetFiles();
  32. ArrayList list = new ArrayList();
  33. foreach(FileInfo file2 in file) {
  34. if (file2.Extension == ".jpg" || file2.Extension == ".jpeg" || file2.Extension == ".gif" || file2.Extension == ".png") {
  35. list.Add(file2);
  36. cntitem++;
  37. }
  38. }
  39. Session["cnt"] = cntitem;
  40. return list;
  41. }
  43. private void doPaging() {
  45. // set the RepeatColumn property 2 of the Datalist control
  46. pagedData.DataSource = ListImages(); //will fetch the records from getTheData() method
  47. //and store in pagedDataSource
  48. pagedData.AllowPaging = true;
  50. pagedData.PageSize = 8;
  51. //will display the 2 records at time in row and coulmn wise
  52. cnt = Convert.ToInt32(Session["cnt"]);
  53. //total record or you can use here viewstate
  54. last1 = cnt / pagedData.PageSize;
  55. last1 = Convert.ToDecimal(Math.Ceiling(last1));
  56. // to find the last record will change 9/2=4.5 into 5
  58. try {
  59. pagedData.CurrentPageIndex = Int32.Parse(Request.QueryString["Page"].ToString());
  60. } catch (Exception ex) {
  61. pagedData.CurrentPageIndex = 0;
  62. }
  63. //place four buttons and name btnprev,btnfirst,last and btnnext
  64. btnPrev.Visible = (!pagedData.IsFirstPage);
  65. btnFirst.Visible = (!pagedData.IsFirstPage);
  67. btnNext.Visible = (!pagedData.IsLastPage);
  68. btnLast.Visible = (!pagedData.IsLastPage);
  70. DataList1.DataSource = pagedData;
  71. DataList1.DataBind();
  73. }
  75. protected void btnNext_Click(object sender, EventArgs e) {
  76. doPaging(); // will call the dopaging method
  77. Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (pagedData.CurrentPageIndex + 1).ToString());
  79. }
  80. protected void btnFirst_Click(object sender, EventArgs e) {
  81. doPaging();
  82. Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (pagedData.CurrentPageIndex == 1).ToString());
  83. }
  84. protected void btnPrev_Click(object sender, EventArgs e) {
  85. doPaging();
  86. Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (pagedData.CurrentPageIndex - 1).ToString());
  88. }
  89. protected void btnLast_Click(object sender, EventArgs e) {
  90. doPaging();
  91. Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (last1 - 1).ToString());
  92. }
  93. protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e) {
  94. DataList1.EditItemIndex = -1;
  95. doPaging();
  97. }
  98. void BindImage() {
  99. DataList1.DataSource = ListImages();
  100. DataList1.DataBind();
  101. doPaging();
  102. }
Step 3: Run your website………………….