ManuelAbadia.com
PagerDataSource samples
Samples



Product Information

HTML Tables vs CSS Lists

The PagerDataSource can generate a table or a list as output. By default, the PagerDataSource renders the pager as an Html Table. Setting the property RenderMode to CSS makes the control to generate a list as output. Note that we have to set the CSS style for the list because by default the items in a list are rendered in different lines.

The HTML output generated by the PagerDataSource when using a table is:

<table id="PagerDataSource1">

        <tr>

            <td>&lt;&lt;</td>

            <td>&lt;</td>

            <td>1</td>

            <td>|</td>

            <td><a id="PagerDataSource1_ctl04_Page_1" href="javascript:__doPostBack('PagerDataSource1$ctl04$Page_1','')">2</a></td>

            <td>|</td>

            <td><a id="PagerDataSource1_ctl06_Page_2" href="javascript:__doPostBack('PagerDataSource1$ctl06$Page_2','')">3</a></td>

            <td>|</td>

            <td><a id="PagerDataSource1_ctl08_Page_3" href="javascript:__doPostBack('PagerDataSource1$ctl08$Page_3','')">4</a></td>

            <td>|</td>

            <td><a id="PagerDataSource1_ctl10_Page_4" href="javascript:__doPostBack('PagerDataSource1$ctl10$Page_4','')">5</a></td>

            <td>|</td>

            <td><a id="PagerDataSource1_ctl12_Page_5" href="javascript:__doPostBack('PagerDataSource1$ctl12$Page_5','')">6</a></td>

            <td>|</td>

            <td><a id="PagerDataSource1_ctl14_Page_6" href="javascript:__doPostBack('PagerDataSource1$ctl14$Page_6','')">7</a></td>

            <td>|</td>

            <td><a id="PagerDataSource1_ctl16_Page_7" href="javascript:__doPostBack('PagerDataSource1$ctl16$Page_7','')">8</a></td>

            <td><a id="PagerDataSource1_ctl17_NextPage" href="javascript:__doPostBack('PagerDataSource1$ctl17$NextPage','')">&gt;</a></td>

            <td><a id="PagerDataSource1_ctl18_LastPage" href="javascript:__doPostBack('PagerDataSource1$ctl18$LastPage','')">&gt;&gt;</a></td>

        </tr>

    </table>

The HTML output generated by the PagerDataSource when using a list is:

 <ul id="PagerDataSource1" class="pager">

        <li>&lt;&lt;</li>

        <li>&lt;</li>

        <li>1</li>

        <li>|</li>

        <li><a id="PagerDataSource1_ctl04_Page_1" href="javascript:__doPostBack('PagerDataSource1$ctl04$Page_1','')">2</a></li>

        <li>|</li>

        <li><a id="PagerDataSource1_ctl06_Page_2" href="javascript:__doPostBack('PagerDataSource1$ctl06$Page_2','')">3</a></li>

        <li>|</li>

        <li><a id="PagerDataSource1_ctl08_Page_3" href="javascript:__doPostBack('PagerDataSource1$ctl08$Page_3','')">4</a></li>

        <li>|</li>

        <li><a id="PagerDataSource1_ctl10_Page_4" href="javascript:__doPostBack('PagerDataSource1$ctl10$Page_4','')">5</a></li>

        <li>|</li>

        <li><a id="PagerDataSource1_ctl12_Page_5" href="javascript:__doPostBack('PagerDataSource1$ctl12$Page_5','')">6</a></li>

        <li>|</li>

        <li><a id="PagerDataSource1_ctl14_Page_6" href="javascript:__doPostBack('PagerDataSource1$ctl14$Page_6','')">7</a></li>

        <li>|</li>

        <li><a id="PagerDataSource1_ctl16_Page_7" href="javascript:__doPostBack('PagerDataSource1$ctl16$Page_7','')">8</a></li>

        <li><a id="PagerDataSource1_ctl17_NextPage" href="javascript:__doPostBack('PagerDataSource1$ctl17$NextPage','')">&gt;</a></li>

        <li><a id="PagerDataSource1_ctl18_LastPage" href="javascript:__doPostBack('PagerDataSource1$ctl18$LastPage','')">&gt;&gt;</a></li>

    </ul>

And the style sheet used for the list is:

ul.pager {

    padding: 1px 1px 1px 1px;

    margin: 1px 1px 1px 1px;

    list-style: none;

    text-align: left;

    white-space: nowrap;

}

 

ul.pager li {

    padding: 1px 1px 1px 1px;

    margin: 1px 1px 1px 1px;

    list-style: none;

    display: inline;

}


The source code for this page is shown after the live sample.


Product List

1
Product 1
Full description for product number 1
2.00 $
2
Product 2
Full description for product number 2
4.00 $
3
Product 3
Full description for product number 3
6.00 $
4
Product 4
Full description for product number 4
8.00 $
5
Product 5
Full description for product number 5
10.00 $
6
Product 6
Full description for product number 6
12.00 $
7
Product 7
Full description for product number 7
14.00 $
8
Product 8
Full description for product number 8
16.00 $
9
Product 9
Full description for product number 9
18.00 $
10
Product 10
Full description for product number 10
20.00 $
11
Product 11
Full description for product number 11
22.00 $
12
Product 12
Full description for product number 12
24.00 $
13
Product 13
Full description for product number 13
26.00 $
14
Product 14
Full description for product number 14
28.00 $

Sample source code

The ASPX file for this sample is:.


<%@ Page Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="TablesvsCSSLists.aspx.cs" Inherits="TablesvsCSSLists" Title="HTML tables vs CSS Lists" %>

 

<%@ Register Assembly="PagerDataSource" Namespace="Manu.Web.UI.WebControls" TagPrefix="manu" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="Content" Runat="Server">

    <h2>Product List</h2>

 

    <asp:DataList ID="DataList1" runat="server"

        DataKeyField="id" DataSourceID="PagerDataSource1"

        RepeatColumns="7" RepeatDirection="Horizontal" Width="100%">

        <ItemTemplate>

            <table>

                <tr>

                    <td align="center">

                        <asp:Label ID="idLabel" runat="server"

                        Text='<%# Eval("id") %>'></asp:Label>

                    </td>

                </tr>

                <tr>

                    <td align="center">

                        <b><asp:Label ID="nameLabel" runat="server"

                        Text='<%# Eval("name") %>'></asp:Label></b>

                    </td>

                </tr>

                <tr>

                    <td align="center">

                        <asp:Label ID="descriptionLabel" runat="server"

                        Text='<%# Eval("description") %>'></asp:Label>

                    </td>

                </tr>

                <tr>

                    <td align="center">

                        <asp:Label ID="priceLabel" runat="server"

                        Text='<%# Eval("price", "{0:#0.00}") %>'>

                        </asp:Label> $

                    </td>

                </tr>

            </table>

        </ItemTemplate>

    </asp:DataList>

 

    <manu:PagerDataSource ID="PagerDataSource1" runat="server"

        DataSourceID="ObjectDataSource1" PageSize="14" RenderMode="CSS" CssClass="pager">

    </manu:PagerDataSource>

 

    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="ProductsDAL"

        SelectMethod="GetPagedData" SelectCountMethod="CountAll" EnablePaging="True"

        MaximumRowsParameterName="maxRows" StartRowIndexParameterName="startIndex">

    </asp:ObjectDataSource>

</asp:Content>


The code-behind file (ASPX.CS) is:


using System;

 

public partial class TablevsCSSLists : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

}