locked
JQuery Datatable Issue RRS feed

  • Question

  • User-195907812 posted

    I'm trying to create a JQuery datatable (datatables.net) in a C# webforms project.

    I need to produce this via code-behind, but I'm getting an error: "Unable to get property 'length' of undefined or null reference"

    namespace DataTableTest
    {
        public partial class _Default : Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack) {
                    BuildTable();
                }
            }
    
            private void BuildTable()
            {
                StringBuilder builder = new StringBuilder();
                builder.Append("<table id=\"tblExample\" class=\"display\">");
                builder.Append("<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>");
                builder.Append("<tbody>\n");
                builder.Append("<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><tr>");
                builder.Append("<tr><td>Row 2 Data 1</td><td>Row 2 Data 2</td><tr>");
                builder.Append("</tbody></table>");
                ltDataTable.Text = builder.ToString();
            }
        }
    }
    $(document).ready(function () {
        $('[id*=tblExample]').DataTable();
    });

    Strangely, if I do this in the aspx file it works fine.

    Does anyone know what's causing this error?

    Tuesday, July 31, 2018 1:42 PM

Answers

  • User-893317190 posted

    Hi RageRiot,

     I find you haven’t add “/” to your last two <tr> element ,which will cause aspx to render two more <tr></tr> pairs ,which has no <td></td> elements.

     The solution is  just to  add “/” to your <tr> like below.

    private void BuildTable()
            {
                StringBuilder builder = new StringBuilder();
                builder.Append("<table id=\"tblExample\" >");
                builder.Append("<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>");
                builder.Append("<tbody>");
                builder.Append("<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr>");
                builder.Append("<tr><td>Row 2 Data 1</td><td>Row 2 Data 2</td></tr>");
                builder.Append("</tbody></table>");
                ltDataTable.Text = builder.ToString();
            }
    

    Below is the result.

    Best regards ,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 1, 2018 8:24 AM

All replies

  • User2103319870 posted

    Try calling the Method to create datatable from c# like below. By this was you will call the DataTable() function after the table has been created on DOM

    change your jquery code like below

    <script>
            function CreateTable() {
                $('#tblExample').DataTable();
            }
        </script>

    Change your Build table method to call the above javascript function from c#

    StringBuilder builder = new StringBuilder();
                    builder.Append("<table id=\"tblExample\" class=\"display\">");
                    builder.Append("<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>");
                    builder.Append("<tbody>\n");
                    builder.Append("<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><tr>");
                    builder.Append("<tr><td>Row 2 Data 1</td><td>Row 2 Data 2</td><tr>");
                    builder.Append("</tbody></table>");
                    ltDataTable.Text = builder.ToString();
                    //call the javascript function after creating table
                    Page.ClientScript.RegisterStartupScript(this.GetType(), "CallJSFunction", "CreateTable()", true);

    Tuesday, July 31, 2018 2:26 PM
  • User475983607 posted

    I recommend using a data bound control like a GridView or Repeater.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTableApiDemo.aspx.cs" Inherits="WebFormsDemo.DataTableApiDemo" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>DataTable Demo</title>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" CssClass="display" style="width:100%" runat="server"></asp:GridView>
            </div>
        </form>
    
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script>
            $(function() {
                $('#<%=GridView1.ClientID %>').DataTable();
            } );
        </script>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsDemo
    {
        public partial class DataTableApiDemo : System.Web.UI.Page
        {
    
            private List<MockData> data = new List<MockData>()
            {
                new MockData()
                {
                    Id = 1,
                    Item = "Item 1"
                },
                new MockData()
                {
                    Id = 2,
                    Item = "Item 2"
                },
                new MockData()
                {
                    Id = 3,
                    Item = "Item 3"
                }
            };
    
            protected void Page_Load(object sender, EventArgs e)
            {
                GridView1.DataSource = data;
                GridView1.DataBind();
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
            }
        }
    
    
    }

    Tuesday, July 31, 2018 2:29 PM
  • User-195907812 posted

    Thank you, this is now giving me the error: Object doesn't support property or method 'DataTable'

    Tuesday, July 31, 2018 2:37 PM
  • User475983607 posted

    Thank you, this is now giving me the error: Object doesn't support property or method 'DataTable'

    My best guess is the JS references are messed up but I can't see the code...

    Tuesday, July 31, 2018 2:38 PM
  • User-893317190 posted

    Hi RageRiot,

     I find you haven’t add “/” to your last two <tr> element ,which will cause aspx to render two more <tr></tr> pairs ,which has no <td></td> elements.

     The solution is  just to  add “/” to your <tr> like below.

    private void BuildTable()
            {
                StringBuilder builder = new StringBuilder();
                builder.Append("<table id=\"tblExample\" >");
                builder.Append("<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>");
                builder.Append("<tbody>");
                builder.Append("<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr>");
                builder.Append("<tr><td>Row 2 Data 1</td><td>Row 2 Data 2</td></tr>");
                builder.Append("</tbody></table>");
                ltDataTable.Text = builder.ToString();
            }
    

    Below is the result.

    Best regards ,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 1, 2018 8:24 AM
  • User-195907812 posted

    Well spotted Ackerly Xu :) Thank you!

    Wednesday, August 1, 2018 8:53 AM