将分页添加到表 asp.NET答案

【问题标题】：Add pagination to a table asp.NET将分页添加到表 asp.NET
【发布时间】：2020-01-13 16:31:22
【问题描述】：

我在aspx 文件中有这个表，在.cs 文件中有函数来从数据库中填充这个表

<asp:Table ID="tblRoles" runat="server" GridLines="Both" HorizontalAlign="center" Style="margin-top: 1em; margin-left:1.5em; margin-right:1.5em; text-align:center; text-wrap:normal;">
    <asp:TableHeaderRow ForeColor="White" BackColor="DodgerBlue" Style="background: #6688FF; height: 4em; text-align: center; text-transform: capitalize;">
        <asp:TableHeaderCell Text="One" Width="5%"/>
        <asp:TableHeaderCell Text="Two" width="10%"/>
        <asp:TableHeaderCell Text="Three" width="10%"/>
        more here...
    </asp:TableHeaderRow>
</asp:Table>

我要为此添加分页，但可以使用Table 来实现吗？如果可以，怎么做？我所有的函数都已经写好来匹配这个表了。对于另一个页面，我使用Gridview 进行了分页，但我想尽可能避免更改所有内容。

【问题讨论】：

表中没有预定义的内容；您可以在表格中添加Next 和Prev 按钮，并根据点击编写数据来回移动的逻辑；将其转换为GridView 很简单；您可能需要权衡两种实现所需的工作量
你为什么不使用DataGrid or a DataGridView？
您可以尝试使用像 DataTable.js 这样的 jQuery 库。让它与你的服务器端代码一起工作可能非常棘手，所以祝你好运

标签： c# asp.net pagination

【解决方案1】：

我也遇到了这个问题。我让它与DataTable.js 一起工作，但并不容易。 DataTable.js API 不仅支持分页，还支持表格的搜索/过滤和排序。但这些通常是 HTML 表格，而不是 <asp:Table>。为了使 HTML 表格可搜索、可排序和分页，需要有 <thead> 和 <tbody> 标记。因此，<asp:Table> 也必须如此。为了给<asp:Table>这两个标签，您需要将TableSection属性设置为TableHeader和TableBody：

<asp:Table ID="myTable" runat="server">
    <asp:TableHeaderRow TableSection="TableHeader">
        <!--A bunch of <asp:TableHeaderCell> tags-->
    </asp:TableHeaderRow>
    <asp:TableRow TableSection="TableBody">
        <!--A bunch of <asp:TableCell> tags-->
    </asp:TableRow>
    <asp:TableRow TableSection="TableBody">
        <!--A bunch of <asp:TableCell> tags-->
    </asp:TableRow>
</asp:Table>

然后为了支持分页以及搜索和排序，在您的 HTML 中包含这些 CDN 依赖项：

<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

最后在文档加载时将您的 <asp:Table> 呈现为 DataTable（注意 jQuery 需要引用！）：

$(document).ready(function () {
     $('#<%=myTable.ClientID%>').DataTable();
}

【讨论】：