Question

我的代码中有错误，无法弄清楚，我做错了什么。正确填充数据表并在ajax.refresh上获取有效的json数据，但表不会重新加载。

HTML

    <table id="monatsabschluss" class="listing">
    <thead class="header">
        <tr>
            <th>Aufgabe</th>
            <th>Status<input type="checkbox" id ="express" ></th>
        </tr>
    </thead>
    <tbody>

的Javascript

var adat = '20160606';
var kid = 7;
var table = $('#monatsabschluss').DataTable( {
     "paging":   false,
     "info":     false,
     "filter":   false,
     "ordering": false,
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/management/bavabrech/fetchjobs",
        "data": function ( d ) {
            d.kid = kid;
            d.adat = adat;
        },
        "dataSrc": "data",
    },
    "columns": [
                { "data": "description" },
                { "data": "status",  className: 'statusCol' },
            ],
});
setInterval( function () {
    table.ajax.reload( null, false ); 
}, 5000 );

的Json

  {"sEcho":1,
   "success":true,
   "iTotalRecords":0,
   "iTotalDisplayRecords":0,
   "aaData":    
       [{"description":"Erstellen Rentendaten",
         "status":3,"id":"1"},
        {"description":"Pr\u00fcfliste erstellen",
         "status":4,"id":"2"},
        {"description":"TEXT","status":"","id":"out_2"}]}

来自初始数据表加载的HTML输出

<table class="listing dataTable no-footer" id="monatsabschluss"
role="grid" style="width: 800px;">
<thead class="header">
    <tr role="row">
        <th class="sorting_disabled" rowspan="1" colspan="1"
            style="width: 469px;">Aufgabe</th>
        <th class="sorting_disabled statusCol" rowspan="1" colspan="1"
            style="width: 269px;">Status<input type="checkbox" id="express">
   </th>
    </tr>
</thead>
<tbody class="">
    <tr role="row" class="maStatusRunning">
        <td>Erstellen Rentendaten</td>
        <td class=" statusCol">Wird ausgeführt</td>
    </tr>
    <tr role="row" class="maStatusComplete">
        <td>Prüfliste erstellen</td>
        <td class=" statusCol">Erledigt</td>
    </tr>
    <tr role="row" class="odd">
        <td>TEXT</td>
        <td class=" statusCol"></td>
    </tr>
</tbody>
</table>

我正在使用Datatable 1.10.7，我没有收到任何错误消息。

Answer 1

我还没有尝试过您的示例，但我可以告诉您一些javascript错误。

首先，您的数据函数定义错误

"data": function ( d ) {
    d.kid = kid,
    d.adat = adat
},

函数体无效Javascript。然后有一些尾随的逗号，不是每个浏览器都喜欢，而且对于json

是无效的

"dataSrc": "data",
{ "data": "status",  className: 'statusCol' },

并在列表部分后的表格定义结束时。你使用IDE吗？它应该突出那些出现的情况。

我会开始在您的数据方法中调用调试器，以便您可以跟踪那里发生的事情。

Answer 2

好的，我已经安装了所有代码并深入研究了这个问题。您的问题与您的serverSide属性有关。如果为true，则客户端希望您将draw属性镜像镜像发送到服务器，这样他就知道他得到的响应是针对他发送的请求（参见https://datatables.net/manual/server-side）。我还看到你在响应中使用了弃用的属性名称（aaData等....）。你必须改变那些，所以他认出了你的绘画属性。

这就是响应在我身边的样子以及它在我的示例中如何使用你的代码

<?php
header('Content-type: application/json');
?>
{
    "success":true,
    "recordsTotal":0,
    "recordsFiltered":0,
    "draw": <?= (int)$_GET['draw'] ?>,
    "data":
    [
        {"description":"Erstellen Rentendaten", "status":3,"id":"1"},
        {"description":"Pr\u00fcfliste erstellen", "status":4,"id":"2"},
        {"description":"TEXT","status":"","id":"out_2"}
    ]
}

我添加了镜像draw属性（你可以在请求url中看到）并将aaData重命名为data，iTotalRecords改为recordsTotal，iTotalDisplayRecords改为recordFiltered并删除了iEcho

Answer 3

您的代码几乎没有问题。要记住的最重要的事情是：始终定义AJAX附带的所有列，通过API隐藏它们。其次，不要混用数据表1.X和2.X代码。在我看来，您的列定义适用于版本2.X，其余代码是版本1.X

所以：

您的列定义错误。你错过了一个专栏

“aaData”：[ {“”mData“”：“description”}， {“”mData“”：“状态”}， {“sClass”：“statusCol”} ]，

如果您想隐藏列，请使用bVisible参数

{“sName”：“id”，“sTitle”：“Foo”，“sClass”：“center”，“sWidth”：“10％”，“bSortable”：“false”，“bVisible”：false }，

我还会将表格html标记更改为

THEAD

 <tr>
        <th>ID</th>
        <th>Aufgabe</th>
        <th>Status<input type="checkbox" id="express"></th>
    </tr>

TBODY

  <tr>
        <td colspan="3">No data yet</td>
    </tr>

使用iniutComplete来判断一切是否正常总是很好：

"fnInitComplete": function (){
    console.log("Init done");
},

最后一件事：如果您想在TD单元格中添加额外内容，请使用单元格自定义渲染器。

{
    "mRender" : function(data, type, row){
        var sb = [];
        sb.push('<div class="test' + data + '" title="' + row[2] + '">&nbsp;</div>');
        return sb.join();
    }
},

数据表刷新不工作但收到正确的json

3 个答案: