Display SqlDataSource data in HTML table (DataTables Plugin)

Question

I want to display SQL Server data in a table <td> so I can use the plugin at https://datatables.net/ I am able to bind the data to things such as

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

such as in this tutorial: https://www.aspsnippets.com/Articles/Display-data-from-database-in-HTML-table-in-ASPNet.aspx

However, the plugin needs a class and id from a table, and therefore doesn't work. I tried inserting class and id that the plugin needs like this but did not work

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

Is there a way of inserting a class and id to the table through html.append?

Thanks

I also tried gridView but that also didnt work, maybe i was referencing the class and id incorrectly — Sup
– Sup, Commented Sep 19, 2017 at 19:14

VDWWD · Accepted Answer · 2017-09-19 19:30:00Z

3

If you have a GridView, you need to use the ClientID. Place the below GridView and JavaScript on the same aspx page.

<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>

However, for a GridView to work with DataTables, you need to add a OnRowDataBound event. Then in code behind add the following code.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.TableSection = TableRowSection.TableHeader;
    }
}

This add the <thead> and <tbody> tags to the generated html, which is needed by datatables.net.

answered Sep 19, 2017 at 19:30

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sup Over a year ago

how would I reference the table id and class, if that is just the rows?

VDWWD Over a year ago

Sorry, I don't quite get what you mean. You can set the class with CssClass in the GridView. And rows with RowStyle-CssClass

Sup · Accepted Answer · 2017-09-19 20:43:48Z

0

I found this that also explained that i needed <thread> tags which i was missing.

Apply Jquery DataTables plugin to ASP GridView

answered Sep 19, 2017 at 20:43

Sup

3073 gold badges5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Display SqlDataSource data in HTML table (DataTables Plugin)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related