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

Question

我希望在表格<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 向表格插入类和 id？谢谢。

- Sup

---

为什么不使用GridView？那是HTML中的表格。 - VDWWD

我也尝试了 gridView，但那也不起作用，可能是我引用类和 ID 的方式不正确。 - Sup

Answer 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;
    }
}

这将在生成的HTML中添加<thead>和<tbody>标签，这是datatables.net所需要的。

- VDWWD

---

如果只是行，我要如何引用表格的id和class呢？ - Sup

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

Answer 2

我发现这篇文章也解释了我缺少的<thread>标签。

将Jquery DataTables插件应用于ASP GridView

- Sup