Remove From My Forums

JQuery Datatable Issue

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

0

Sign in to vote

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
0

Sign in to vote

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