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中包括以下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();
}

将分页添加到表asp.NET

1 个答案: