JQuery append thead and tbody to table

Question

I'm using JQuery to build a DataTable. however I get the c is undefined error. This is due to my code not including the thead and tbody.

How can I add thead and tbody to the following code?

I've tried adding the dataSrc: "Data", which did not work. I understand DataTables require the thead for it format correctly.

     function getItemStyles() {
            try
            {
                //fetch item styles
                $.ajax({
                    cache: false,
                    dataSrc: "Data",
                    url: 'manage-prices-get-item-styles',
                    data: {},
                    type: 'post',
                    success: getItemStylesSucess,
                    error: fail
                });
            }
            catch(e){
                alert(e.message);
            }
        }


  function getItemStylesSucess(result) {
        try
        {
            var output = '';

            if (result.success == true) {
                //build table
                var xmlDoc = $.parseXML(result.message);
                var list = $(xmlDoc).find("Inventory");

                //Create a HTML Table element.
                var table = $("<table id='item-style-table' class='table table-bordered table-striped' />");
                table[0].border = "1";

                //Add the header row.
                var row = $(table[0].insertRow(-1));
                list.eq(0).children().each(function () {
                    var headerCell = $("<th />");
                    headerCell.html(this.nodeName);
                    row.append(headerCell);
                });
                table[0].append('</thead>');

                //Add the data rows.
                $(list).each(function () {
                    row = $(table[0].insertRow(-1));
                    $(this).children().each(function () {
                        var cell = $("<td />");
                        cell.html($(this).text());
                        row.append(cell);
                    });
                });

                var dvTable = $("#item-styles");
                dvTable.html("");
                dvTable.append(table);
                $("#item-style-table").DataTable();

            }
            else {
                output = result.message;
            }

            $('#item-styles-load').css('display', 'none');

        }
        catch (e) {
            alert(e.message);
        }
    }

I tried that in different ways. Still trying. not getting it right though :/ it's going in all different places — Orion, Oct 25 '17 at 11:13
Check [this](https://stackoverflow.com/questions/29893207/datatables-typeerror-c-is-undefined) — Durga, Oct 25 '17 at 11:17
I checked that article already :) did a search to find solutions. Tried it and it did not work. Updating my question now to include the Ajax call — Orion, Oct 25 '17 at 11:19

score 0 · Accepted Answer · answered Oct 25 '17 at 12:00

Changed the code as follows and it works 100%.

Reference: DataTables when HTML table is created through import of xml

function getItemStylesSucess(result) {
        try
        {
            var output = '';

            if (result.success == true) {
                //build table
                $("#item-styles").DataTable({
                    data: loadItemStylesData(result.message)
                })

            }
            else {
                output = result.message;
            }

            $('#item-styles-load').css('display', 'none');

        }
        catch (e) {
            alert(e.message);
        }
    }

    function loadItemStylesData(rocol) {
        var data = [];
        $(rocol).find('Inventory').each(function () {
            data.push([
                       $(this).find("InventoryID").text(),
                       $(this).find("SytleColour").text()
            ])
        })
        return data;
    }

JQuery append thead and tbody to table

1 Answers1