如何在 ASP.NET 中为表格添加分页

Question

我在 .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

进行了分页，但如果可能的话，我想避免更改所有内容。

Answer 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 中包含这些 jQuery 依赖项：

<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();
}