Javascript 无法使用Ajax调用更新DataTable主体_Javascript_Jquery_Ajax_Datatables

Javascript 无法使用Ajax调用更新DataTable主体

javascript jquery ajax datatables

Javascript 无法使用Ajax调用更新DataTable主体,javascript,jquery,ajax,datatables,Javascript,Jquery,Ajax,Datatables,我有一个DataTable，我正试图通过它和ajax调用加载数据，但第一行数据总是说： “表中没有可用数据” 但是在它下面包含了加载的ajax数据。如何删除无数据行并将ajax数据加载到该位置代码如下： <div class="box-body"> <table id="changeTicketsTable" class="table table-bordered table-striped"> <thead> <tr>

我有一个DataTable，我正试图通过它和ajax调用加载数据，但第一行数据总是说：

“表中没有可用数据”

但是在它下面包含了加载的ajax数据。如何删除无数据行并将ajax数据加载到该位置

代码如下：

<div class="box-body">
  <table id="changeTicketsTable" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Ticket Number</th>
        <th>Description</th>
        <th>Risk</th>
        <th>Primary CI</th>
        <th>State</th>
        <th>Planned Start Date</th>
        <th>Actual Start Date</th>
        <th>Actual End Date</th>
        <th>Affected Partners</th>
      </tr>
    </thead>
    <tbody>  

    </tbody>
    <tfoot>
      <tr>
        <th>Ticket Number</th>
        <th>Description</th>
        <th>Risk</th>
        <th>Primary CI</th>
        <th>State</th>
        <th>Planned Start Date</th>
        <th>Actual Start Date</th>
        <th>Actual End Date</th>
        <th>Affected Partners</th>
      </tr>
    </tfoot>
  </table>
</div>


车票号码
描述
风险
初级CI
陈述
计划开始日期
实际开始日期
实际结束日期
受影响的伙伴
车票号码
描述
风险
初级CI
陈述
计划开始日期
实际开始日期
实际结束日期
受影响的伙伴

DataTable的实现：

<script>
    getChangeTicketInformation();
    $('#changeTicketsTable').DataTable({
      "pageLength": 5,
      'paging'      : true,
      'lengthChange': true,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    });
  })
</script>


getChangeTicketInformation（）；
$（'#changeTicketsTable'）。数据表({
“页面长度”：5，
“分页”：对，
“长度变化”：正确，
“搜索”：错误，
“排序”：正确，
“信息”：正确，
“自动宽度”：false
});
})

用于进行Ajax调用的Javascript：

function getChangeTicketInformation(){
  $.ajax({
     type: "GET",
     url: "../../get_change_ticket_info",
      success: function(data) {
        $.each(data, function (i, item) {
         $('#changeTicketsTable').find('tbody').append(
            '<tr>' +
            '<td>' + item.number + '</td>' +
            '<td>' + item.short_description + '</td>' +
            '<td>' + item.risk + '</td>' +
            '<td>' + item.cmdb_ci_display_value + '</td>' +
            '<td>' + item.state + '</td>' +
            '<td>' + item.start_date + '</td>' +
            '<td>' + item.work_start + '</td>' +
            '<td>' + item.work_end + '</td>' +
            '<td>' + 'FILL IN' + '</td>'
            + '</tr>');
        });
      }
    });
}

函数getChangeTicketInformation（）{
$.ajax({
键入：“获取”，
url:“../get\u change\u ticket\u info”，
成功：功能（数据）{
$。每个（数据、功能（i、项）{
$（'#changeTicketsTable'）。查找（'tbody'）。追加(
'' +
''+项目编号+''+
''+项目。简短描述+''+
''+项目风险+''+
''+item.cmdb_ci_显示值+''+
''+项目状态+''+
''+项目开始日期+''+
''+项目.工作\开始+''+
''+项目工作结束''+
“+”填写“+”
+ '');
});
}
});
}

在Chrome中打开开发者工具，在页面中键入jquery（也在下面），然后查看发生了什么。然后检查html，看看是否按预期更新了它-它可能在那里，但可能被隐藏

但更好的方法实际上是使用DataTable的内置ajax功能：

$（'changeTicketsTable'）。查找（'tbody'）。追加(
'' +
''+项目编号+''+
''+项目。简短描述+''+
''+项目风险+''+
''+item.cmdb_ci_显示值+''+
''+项目状态+''+
''+项目开始日期+''+
''+项目.工作\开始+''+
''+项目工作结束''+
“+”填写“+”
+ '');
});

使用DataTable，您可以使用以下API添加新行：

：向表中添加新行

函数getChangeTicketInformation（）{
风险值数据=[{number:1，简短描述：'1'，风险：1，cmdb\u ci\u显示值：1，状态：'1'，开始日期：'1'，工作开始：'1'，工作结束：'1'，
{编号：2，简短描述：'2'，风险：2，cmdb\u ci\u显示值：2，状态：'2'，开始日期：'2'，工作开始：'2'，工作结束：'2'，
{编号：3，简短描述：'3'，风险：3，cmdb_ci_显示值：3，状态：'3'，开始日期：'3'，工作开始：'3'，工作结束：'3'}]；
//$.ajax({
//键入：“获取”，
//url:“../get\u change\u ticket\u info”，
//成功：功能（数据）{
var dti=$（'#changeTicketsTable'）.DataTable（）；
$。每个（数据、功能（i、项）{
dti.row.add([
项目编号：，
项目。简短描述，
项目1.风险，
item.cmdb\u ci\u显示值，
项目.国家，
item.start_日期，
项目。工作开始时，
项目.工作结束，
“填写”
]).抽签（假）；
});
//}
//});
}
$（'#changeTicketsTable'）。数据表({
“页面长度”：5，
“分页”：对，
“长度变化”：正确，
“搜索”：错误，
“排序”：正确，
“信息”：正确，
“自动宽度”：false
})
getChangeTicketInformation（）

车票号码
描述
风险
初级CI
陈述
计划开始日期
实际开始日期
实际结束日期
受影响的伙伴
车票号码
描述
风险
初级CI
陈述
计划开始日期
实际开始日期
实际结束日期
受影响的伙伴
我可以给你一个简单的例子。从你的ajax url获取数组响应，如下所示
制作
和
试试这个
function getChangeTicketInformation() {
$.ajax({
    type: "GET",
    url: "../../get_change_ticket_info",
    success: function (data) {

        for (let i in data) {
            let item = data[i];
            let number = item[0];
            let short_description = item[1];
            let risk = item[2];
            let cmdb_ci_display_value = item[3];
            let state = item[4];
            let start_date = item[5];
            let work_start = item[6];
            let work_end = item[7];

            let tableRow = "<tr>\n" +
                "                        <td> " + number + "</td>\n" +
                "                        <td> " + short_description + "</td>\n" +
                "                        <td> " + risk + "</td>\n" +
                "                        <td> " + cmdb_ci_display_value + "</td>\n" +
                "                        <td> " + state + "</td>\n" +
                "                        <td> " + start_date + "</td>\n" +
                "                        <td> " + work_start + "</td>\n" +
                "                        <td> " + work_end + "</td>\n" +
                "                        <td> " + 'FILL IN' + "</td>\n" +
                "                    </tr>";

            $('#table_tbody_id').append(tableRow);
        }

    }
});
}

由于两个原因，我否决了这个答案。首先，您不应建议调用jQuery$.ajax（）
方法来填充数据表，而存在嵌入式选项，它会在必要时在任何地方触发ajax调用。其次，手动执行DataTables工作并编写
html是没有意义的，更不用说它不会影响基础表数据源，也不会使大多数DataTables API变得无用。还有更好的解决方案-使用DataTables嵌入选项来提取数据。你是对的。还有一个jQuery插件可以考虑。我添加这个答案只是为了证明datatable是一个有自己方法的插件……如果发布了基于原生DataTables选项的解决方案，我会投票支持这个答案。相反，我担心OP已经接受了这个答案，因为它的代码编写了HTML，这也是完全错误的-DataTables本身可以做到这一点，此外，表数据不受此方法的影响，因此，您不能使用大多数DataTables API方法。所以，我不得不放弃
function getChangeTicketInformation() {
$.ajax({
    type: "GET",
    url: "../../get_change_ticket_info",
    success: function (data) {

        for (let i in data) {
            let item = data[i];
            let number = item[0];
            let short_description = item[1];
            let risk = item[2];
            let cmdb_ci_display_value = item[3];
            let state = item[4];
            let start_date = item[5];
            let work_start = item[6];
            let work_end = item[7];

            let tableRow = "<tr>\n" +
                "                        <td> " + number + "</td>\n" +
                "                        <td> " + short_description + "</td>\n" +
                "                        <td> " + risk + "</td>\n" +
                "                        <td> " + cmdb_ci_display_value + "</td>\n" +
                "                        <td> " + state + "</td>\n" +
                "                        <td> " + start_date + "</td>\n" +
                "                        <td> " + work_start + "</td>\n" +
                "                        <td> " + work_end + "</td>\n" +
                "                        <td> " + 'FILL IN' + "</td>\n" +
                "                    </tr>";

            $('#table_tbody_id').append(tableRow);
        }

    }
});
}

getChangeTicketInformation();