使用jquery填充数据时数据表不起作用答案

【问题标题】：Datatable not working when populating the data using jquery使用jquery填充数据时数据表不起作用
【发布时间】：2015-07-29 13:55:25
【问题描述】：

我尝试使用 HTML 显示数据表。它对我有用。我能够得到准确的数据表。

下面是我的 HTML 和 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>

我的 Jquery：

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

但我需要用我的 ajax 响应填充数据表。当我使用下面的代码时，我只能得到简单的 html 表。但不是数据表。

这是我的 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>

我的 HTML：

<div id="TableContent">

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

谁能帮我找出哪里出错了？

谢谢！

【问题讨论】：

你初始化你的数据表了吗
是的，我已经初始化了！
在哪里？？它在代码中丢失
您应该尝试阅读 DataTable 文档。当您使用插件时，请先尝试阅读它。 datatables.net

标签： jquery html ajax asp.net-mvc datatable

【解决方案1】：

您不需要在 JS 中构建表格。您只需要在您的 html 中创建一个空表并在您的 JS 中启动该表。 DataTable 将为您填充数据。

在 HTML 中：

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

在 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 

)

【讨论】：