Datatable not working on dynamically generated html table

manoja

Hello,

I have generated a table dynamically using Jquery and trying to display the JSON data in the table. I am creating the table dynamically in Jquery with <thead> and <tbody> tags and trying to initialize a datatable. When i run the code. It doesn't display me the table and i dont see any error.

This is my Jquery code where i dynamically created a table
$("div#tabs").append(

            "<div id='tabs" + i + "'><div id='tablediv" + i + "'><table id='table0'  class='display' cellspacing='0' width='100%'><thead><tr><th></th><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tbody></tbody></table></div</div>" );

AJAX Request to display the data in Datatable:

   $.ajax({
            type: "GET",
            url: "Controller/Action",
            async: true,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data !== null && data.length > 0) {
                    var tableData = JSON.parse(data);

                    $("#table0").DataTable().destroy();


                    $("#table0").DataTable({
                        dom: "Bfrtip",
                        data: tableData,

                        columns: [

                            {
                                className: 'select-checkbox',

                                orderable: false,

                                data: null,

                                defaultContent: '' "

                            },

                            { data: "name" },
                            { data: "position" },
                            { data: "office" },
                            { data: "extn." },
                            { data: "start_date" },
                            { data: "salary" }

                        ],
                        rowReorder: {
                            dataSrc: 'DT_Rowid'
                        },
                        select: {
                            style: 'os',
                            selector: 'td:first-child'
                        }
                        , buttons: [
                            { extend: "create", editor: editor },
                            { extend: "edit", editor: editor },
                            { extend: "remove", editor: editor }
                        ]

                    });


                }
            },
            error: function Error(result, error) {
                alert("error " + result.status + " " + result.statusText);
            }
        });


    }

});

Sample Data:

{
"data": [
{
"DT_RowId": "row_1",
"name": "Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start_date": "2011-04-25"
"salary": "320800",

},
{
  "DT_RowId": "row_2",   
  "name": "Winters",
  "position": "Accountant",   
  "office": "Tokyo",
  "extn": "8422",
  "salary": "170750",
  "start_date": "2011-07-25"
},

The html table has been successfully created and I am able to load my Json data from ASP.net controller method into the 'data: tabledata'. But the datatable is not getting initialized and i am not able to see the datatable and data loaded into it.

Thanks!

kthorngren

Since you are using data instead of ajax Datatables doesn't look for the data in the data object. Try this:

                 $("#table0").DataTable({
                     dom: "Bfrtip",
                     data: tableData.data,
                     .....

Kevin

manoja

Hey Kevin,

That didn't solve my problem. When i defined my table template
"

	Name	Position	Office	Extn.	Start date	Salary

" in .cshtml file. I was able to see the table and data successfully. But when i tried creating the table dynamically in Jquery just like in the initial post. I couldn't see the table.

kthorngren

Do you get any errors?

Have you tried using console.log(tableData) to see what it contains in the ajax success function?

Can you post a link to your page or an example showing the issue?

Kevin

manoja

Hey Kevin, I dont think the issue is with the tableData. I am able to successfully get the json data and i don't see any error. I suspect that the datatable is not able to find the "table0" that i created in jquery. So i used $("table#table0").Datatable({}); and it worked.

Thanks for your help kevin!