Datatable not working when populating the data using jquery

Question

I have tried to display the datatable using HTML. It worked for me. I'm able to get exact datatable.

Below is my HTML and Jquery :

<div class="col-md-9">

    <table class="table dt-responsive" id="ItemTable">
        <thead>
            <tr>
                <th> Column1 </th>
                <th> Column2</th>
                <th>Column3</th>
                <th> Column4 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
                <td>Value 4</td>
            </tr>
            <tr>
                <td>Value 5</td>
                <td>   Value 6 </td>
                <td>Value 7</td>
                <td>Value 8</td>
        </tbody>
    </table>

</div>

My Jquery :

<script>
    $('#ItemTable').DataTable({
        responsive: true,
        scrollX: true,
        lengthMenu: [10, 20, 50, 200, 400]
    });
</script>

But I need to populate datatable with my ajax response. When I use my below code, I'm able to get only simple html table. But not datatable.

Here is my Jquery :

<script type="text/javascript">
    $("#submit").click(function () {
        var Details = JSON.stringify({           
            SelectedReportName: $("#SelectedReport").val(),            
        });

        $('#target').html('sending..');
        var thisURL = '@Url.Action("GetReport", "DQR")';

        $.ajax({
            url: thisURL,
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: Details,
            success: function (data) {
                var table = "";
                var iteration = data.HeaderList.length;
                var noOfRows = data.ValuesList.length;
                var startTag = "<table class='table dt-responsive' id='ItemTable'><thead><tr>";
                table = table + startTag;
                for (var i = 0; i < iteration; i++) {
                    var td = ("<th>" + data.HeaderList[i].ColumnHeader + "</th>");
                    table = table + td;
                }
                var headEndTag = "</tr></thead>";
                table = table + headEndTag;
                var bodyStartTag = "<tbody>";
                table = table + bodyStartTag;
                for (var i = 0; i < noOfRows; i++) {
                    var tableRow = "<tr>";
                    table = table + tableRow;
                    if (data.ValuesList[i].Column1 != null) {
                        var td = ("<td>" + data.ValuesList[i].Column1 + "</td>");
                    }
                    table = table + td;

                    if (data.ValuesList[i].Column2 != null) {
                        var td1 = ("<td>" + data.ValuesList[i].Column2 + "</td>");
                    }
                    table = table + td1;                 

                    var tableEndRow = "</tr>";
                    table = table + tableEndRow;
                }
                var endTag = "</tbody></table>";
                table = table + endTag;
                $("#TableContent").html(table);               
            }
        });
    });
</script>

My HTML:

<div id="TableContent">

//Here I will populate the datatable    
</div>

Could anyone help me to find out where it went wrong ?

Thanks!

you should try and read DataTable documentation. When you are using a plugin, try and read about it first. datatables.net — shwetaOnStack
– shwetaOnStack, Commented Jul 29, 2015 at 6:07

Shawn Song · Accepted Answer · 2015-07-29 05:55:25Z

1

You don't need to build your table in JS. You only need to create an empty table in your html and initiate the table in your JS. DataTable will populate the data for you.

in HTML:

<table id="your-data-table">
    <thead>
         <tr>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
         <tr>
    </thead>
</table>

in Javascript:

$("#your-data-table").DataTable({
    serverSide: true,
    processing: true,
    ajax: {
        url: thisURL,
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        data: Details,
        async: true
    },
    // your other settings 

)

answered Jul 29, 2015 at 5:55

Shawn Song

3011 silver badge10 bronze badges

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

Collectives™ on Stack Overflow

Datatable not working when populating the data using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related