在 HTML 表格中显示 SqlDataSource 数据（DataTables 插件）

Posted 2023-05-07

【中文标题】在 HTML 表格中显示 SqlDataSource 数据（DataTables 插件）

【英文标题】：Display SqlDataSource data in HTML table (DataTables Plugin)

【发布时间】：2018-02-28 16:16:46

【问题描述】：

我想在表<td> 中显示SQL Server 数据，这样我就可以使用https://datatables.net/ 的插件我可以将数据绑定到诸如

<asp:PlaceHolder ID = "PlaceHolder1" runat="server" />

如本教程中：https://www.aspsnippets.com/Articles/Display-data-from-database-in-html-table-in-ASPNet.aspx

但是，该插件需要一个表中的类和 id，因此不起作用。我尝试像这样插入插件需要的类和 ID，但没有用

// Table start.
html.Append("<table border = '1'>");
html.Append("<table class = "display" id = "example">");

有没有办法通过html.append向表中插入class和id？

谢谢

【问题讨论】：

为什么不使用 GridVIew？那是html中的表格。

我也试过 gridView 但也没用，可能是我引用的类和 id 不正确

【参考方案1】：

如果你有一个 GridView，你需要使用 ClientID。将下面的 GridView 和 javascript 放在同一个 aspx 页面上。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>

<asp:GridView ID="GridView1" runat="server"
    OnRowDataBound="GridView1_RowDataBound">
</asp:GridView>

<script type="text/javascript">
    $(document).ready(function () 
        $('#<%= GridView1.ClientID %>').DataTable();
    );
</script>

但是，要使 GridView 与 DataTables 一起使用，您需要添加一个 OnRowDataBound 事件。然后在后面的代码中添加如下代码。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

    if (e.Row.RowType == DataControlRowType.Header)
    
        e.Row.TableSection = TableRowSection.TableHeader;
    

这会将<thead> 和<tbody> 标记添加到datatables.net 需要的生成的html 中。

【讨论】：

如果只是行，我将如何引用表 id 和类？

抱歉，我不太明白你的意思。您可以在 GridView 中使用CssClass 设置类。以及带有RowStyle-CssClass

的行

【参考方案2】：

我发现这也解释了我需要我缺少的<thread> 标签。

Apply Jquery DataTables plugin to ASP GridView