Datalist 中自定义 SEO 友好分页，仿 Google
0/5 (0投票)
让我们看看如何使用 Datalist 进行分页，包括“上一页”、“下一页”以及像 Gridview 那样自定义页码。这里我将介绍以下内容：
让我们看看如何使用 Datalist 进行分页，包括“上一页”、“下一页”以及像 Gridview 那样自定义页码。
这里我将介绍以下内容：
i) 一个数据列表 dlCollegeList ，我们将对其实现分页
ii) 两个超链接（hyPrevious 和 hyNext），用于向前和向后导航
iii) 最后，一个文字控件（litPaging），用于显示页码。
这里我使用存储过程来填充我的数据列表，现在让我们进入实现。
我的数据列表和导航链接标记如下。
<div>
<asp:DataList ID="dlCollegeList"runat="server"
OnItemDataBound="dlCollegeList_ItemDataBound"onitemcommand="dlCollegeList_ItemCommand"Width="100%"
>
<ItemTemplate>
<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>
<div class="col-cour-name">
<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>
<div id="pagination">
<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>
div>
存储过程：
CREATE PROCEDURE[dbo].[listInstitute]
@startRowIndex int,
@pageSize int,
@totalCount int output,
@category varchar(max)
AS
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'%' RowNum BETWEEN@startRowIndex @startRowIndex @pageSize 1
ORDER BY inst_name DESC
SELECT @totalCount Countclgid FROM collegedetailswhere category '%'@category'%'
END
END
这是用于填充数据列表的存储过程，让我们看看这里使用的属性。
· startRowIndex 用于设置要显示的初始行，它计算该特定页面中要显示的记录的行索引。
· pageSize 表示每页的记录数。
· totalCount 获取 select 命令返回的记录总数。
代码隐藏：
声明：
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())
{
// 将 select 命令分配给 Adapter 对象
dAd.SelectCommand = dCmd;
// 现在打开连接
conn.Open();
dTable.Clear();
dAd.Fill(dTable);
conn.Close(); // 关闭连接
}
_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();
//获取总页数
int totalPages = totalRecords / pageSize + (totalRecords % pageSize > 0 ? 1 : 0);
//获取当前页码
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);
}
//添加上一页按钮
if (currentPageNo > 1)
{
str.Append(string.Format("href=\"http://www.yoursite.com/ListInstitute/"+Request["category"].ToString()+ "/{0}\" title=\"Previous page\">", (currentPageNo - 2) + 1));
}
//添加数字链接
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++)
{
// 对于当前页，没有链接，粗体文本
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 是一个函数，用于根据我们的要求执行分页。在这里，我定制了 GetPaging 函数，使其只返回 10 个页码。因此，文字控件只在“上一页”和“下一页”链接之间显示 10 个页码，这可以根据您的需求进行修改。
您可以看到链接之间的页码。这些页码将通过查询字符串传递，用于计算要显示的记录的起始索引和行索引。此外，这种分页是 SEO 友好的。
BindGridView 是执行存储过程的函数。
现在在我的 PageLoad 中，我的函数调用如下：
protected void Page_Load(objectsender, EventArgs e)
{
if (!IsPostBack)
{
// 检查当前索引
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(); // 绑定文章
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;
}
}
至此，Datalist 的自定义分页已完成。我的 Datalist 已实现分页。
您可以看到我的数据列表已实现分页。