Custom SEO Friendly Paging in Datalist like Google

Tuesday, May 3, 2011

Let’s see how to do paging with Datalist in as Next, Previous and with customized Page numbers as that of Gridview.

Here I have the following things..

i) A datalist dlCollegeList to which we are to implement the paging

ii) Two Hyperlinks (hyPrevious & hyNext) for navigating backward and forward

iii) Finally, a literal (litPaging) for displaying page numbers.

Here am using the stored procedure to fill my datalist and now let’s move to the implementation.

My datalist and Navigation links markup is as follows.

<div>

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

OnItemDataBound="dlCollegeList_ItemDataBound"onitemcommand="dlCollegeList_ItemCommand"Width="100%"

<div class="col-photo"><asp:HyperLinkID="hyInstLogo" runat="server"

NavigateUrl='' ><asp:ImageButton ID="imgLogo"ToolTip='' runat="server"Width="63px" Height="60px"CssClass="col-photo-border"/>asp:HyperLink>div>

<h4><asp:Label ID="lblclgId"runat="server" Text=''Visible="false">asp:Label><asp:HyperLink ID="hyinstName"runat="server"

NavigateUrl=''Text=''>asp:HyperLink>h4>

div>

<divclass="cityname"><asp:HyperLinkID="hyCity" runat="server"Text=''>asp:HyperLink><asp:LabelID="lblCity" runat="server" Text=''Visible="false">asp:Label>div>

div>

ItemTemplate>

asp:DataList>

<ul>

<li> <asp:HyperLinkID="hyPrevious"runat="server">Previousasp:HyperLink>li><li><asp:Literal ID="litPaging"runat="server"EnableViewState="true">asp:Literal>li><li><asp:HyperLink ID="hyNext"runat="server">Nextasp:HyperLink>li>

ul>

div>

Stored Procedure :

CREATE PROCEDURE[dbo].[listInstitute]

@startRowIndex int,

@pageSize int,

@totalCount int output,

@category varchar(max)

BEGIN

SET NOCOUNT ON;

SET @totalCount = 0

SET @startRowIndex =@startRowIndex + 1

BEGIN

SELECT * FROM (

Select collegedetails.*,ROW_NUMBER() OVER (ORDER BYcollegedetails.inst_name asc) asRowNum

FROM collegedetails wherecategory like '%' + @category + '%'

) as ArticleList

WHERE

category like '%'+@category+'%'and (RowNum BETWEEN@startRowIndex AND(@startRowIndex + @pageSize) -1)

ORDER BY inst_name DESC

SELECT @totalCount =Count(clgid) FROM collegedetailswhere category like'%'+@category+'%'

END

This is the stored procedure which is used to fill the datalist and lets see the attributes used here.

· The startRowIndex is the one which sets the initial row to display and this calculates the rowindex of records to be displayed in that particular page.

· the pageSize denotes the number of records per page,

· totalCount gets the total number of records returned by the select command

Code Behind :

Declarations:

int _startIndex = 0;

int _thisPage = 1;

int _pageSize = 10;

int _totalNumberOfRows = 0;

string sPage;

SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);

private void BindGridView ()

{

DataTable dTable = newDataTable();

using (SqlConnection conn = newSqlConnection(connStr))

{

using (SqlCommand dCmd = newSqlCommand())

{

SqlParameter[] prms = newSqlParameter[4];

prms[0] = newSqlParameter("@startRowIndex",SqlDbType.Int);

prms[0].Value = _startIndex;

prms[1] = newSqlParameter("@pageSize",SqlDbType.Int);

prms[1].Value = _pageSize;

prms[2] = newSqlParameter("@totalCount",SqlDbType.Int);

prms[2].Direction =ParameterDirection.Output;

prms[3] = newSqlParameter("@category",SqlDbType.VarChar);

prms[3].Value = Request["category"].Replace("-"," ");

dCmd.CommandText ="listInstitute";

dCmd.CommandType =CommandType.StoredProcedure;

dCmd.Parameters.AddRange(prms);

dCmd.Connection = conn;

using (SqlDataAdapter dAd = newSqlDataAdapter())

{

// assign the select command to the Adapter object

dAd.SelectCommand = dCmd;

// now open the connection

conn.Open();

dTable.Clear();

dAd.Fill(dTable);

conn.Close(); // close the connection

}

_totalNumberOfRows =int.Parse(prms[2].Value.ToString());

}

dlCollegeList.DataSource = dTable;

dlCollegeList.DataBind();

litPaging.Text = GetPaging(_totalNumberOfRows, _pageSize, 10);

//LitPagingTop.Text = GetPaging(_totalNumberOfRows, _pageSize, 10);

}

string GetPaging(int totalRecords,int pageSize, inttotalNumericLinks)

{

if (totalRecords <= pageSize)

{

return "";

}

StringBuilder str = newStringBuilder();

//Get Total no of pages

int totalPages = totalRecords / pageSize + (totalRecords % pageSize > 0 ? 1 : 0);

//Get Current Page no

int currentPageNo = 1;

string pageUrl = Context.Request.Url.AbsolutePath;

if(Context.Request.QueryString["page"] == null)

{

currentPageNo = 1;

}

if(Context.Request.QueryString["page"] != null)

{

currentPageNo = 1 + (Convert.ToInt32(Context.Request.QueryString["page"]) - 1);

}

//Add previous button

if (currentPageNo > 1)

{

str.Append(string.Format("href=\"http://www.yoursite.com/ListInstitute/"+Request["category"].ToString()+ "/{0}\" title=\"Previous page\">", (currentPageNo - 2) + 1));

}

//Add Numeric link

int sp, ep;

if (totalNumericLinks >= totalPages)

{

sp = 1;

ep = totalPages;

}

else

{

if (currentPageNo - totalNumericLinks / 2 > 0)

{

ep = (currentPageNo + totalNumericLinks / 2 - (totalNumericLinks - 1) % 2);

ep = ep <>

}

else

{

ep = totalNumericLinks;

}

sp = ep - totalNumericLinks + 1 > 0 ? ep - totalNumericLinks + 1 : 1;

}

for (int p = sp; p <= ep; p++)

{

//For Current Page, No Link, Bold Text

if (p == currentPageNo)

{

str.Append(String.Format(" {0}", p.ToString()));

}

else

{

str.Append(String.Format(" + Request["category"].ToString() +"/{1}\" title=\"{0}\">{0} ", p, (p - 1) + 1));

}

if (currentPageNo == totalPages)

{

hyNext.Visible = false;

// hyNextTop.Visible = false;

}

if (currentPageNo == 1)

{

hyPrevious.Visible = false;

//hyPreviousTop.Visible = false;

}

if (Request["page"] == null)

{

hyNext.Visible = true;

//hyNextTop.Visible = true;

}

if (currentPageNo > 1)

{

hyPrevious.Visible = true;

//hyPreviousTop.Visible = true;

}

return str.ToString();

}

GetPaging is the function which Is used to perform the paging as per our requirement. Here I have customised the GetPaging function to return only 10 pagenumbers. So the Literal control displays only 10 page numbers in between the Previousand Next links and this can be modified according to your requirement.

You could see the page numbers between the links. This pagenumber will be passed through the query string for calculating the startindex and rowindex of the records to be displayed. Moreover this paging is SEO friendly.

BindGridView is the function which executes the stored procedure.

And now in my PageLoad my function is called as below..

protected void Page_Load(objectsender, EventArgs e)

{

if (!IsPostBack)

{

// check for current index

if (Request["page"] != null)

{

int.TryParse(Request["page"].ToString(), out _thisPage);

s =Convert.ToInt32(Request["page"].ToString());

st = (s - 1) * 10;

string str = Convert.ToString(st);

int.TryParse(str, out _startIndex);

}

int pSer = s - 1;

int nSer = s + 1;

if (s == 0)

{

nSer = 2;

}

BindGridViewArticels(); // bind articles

hyPrevious.NavigateUrl ="http://www.yoursite.com/ListInstitute/"+Request["category"].ToString()+"/" + pSer;

hyNext.NavigateUrl ="http://www.yoursite.com/ListInstitute/"+ Request["category"].ToString() +"/" + nSer;

}

if (_totalNumberOfRows <= 10)

{

hyNext.Visible = false;

hyPrevious.Visible = false;

}

And now with this Custom pagination for Datalist is done. So here is my Datalist with paging implemented.

You can see my Datalist with Pagination implemented

1 Comment