Question

所以表格在页面上


<table width="100%" id="ticketListTable" class="genmed"></table>

然后我使用AJAX返回数据


$.ajax({
    type: 'POST',
    url: "ticketAjax.php",
    data: '&m=swapTicketList',
    dataType: "json",
    success: function(resultData) {
        $('#ticketListTable').dataTable({
            "aaData": resultData,
            "aaSorting": [[0, "desc"]],
            "bJQueryUI": true,
            "bScrollInfinite": true,
            "bScrollCollapse": true,
            "bDestroy": true,
            "bDeferRender": true,
            "iDisplayLength": 100,
            "sScrollY": "1000px",
            "sDom": "Rlfrtip",
        });
    }
});

AJAX正在工作并返回


[{"ID":["17316","17314","17313","17312","17311","17310","17309","17308","17307"....

但是aaData没有使用该Json数据填充表。我误解了这是如何工作的？我已经阅读了不少论坛和帖子，它们似乎都会导致这种用法。

Answer 1

您需要为数据而不是对象提供数组数组。还要定义列。子数组将表示各个行，主数组包含所有行

按照JS Array示例

进行操作

http://www.datatables.net/release-datatables/examples/data_sources/js_array.html

注意提供给aaData的嵌套数组结构并遵循该结构

Answer 2

好的，所以它并不像我想的那么容易。在AJAX中，我必须构建数组，然后将json_encode返回到另一个数组中。

json_encode(array('tickets' => $tickets)) //-- WHERE $tickets = array(array(1, 'Options 1'), array(2, 'Options 2'))

我还必须将列标题作为数组返回

json_encode(array('tickets' => $tickets, 'headers' => $headers)) //-- WHERE $headers = array('ID', 'Options', etc..)

$ header中的元素数量必须与$ ticket匹配，否则它不会初始化表。

然后标题的JS部分是

            aoColumnArray = [];
        $.each(resultData.headers, function(index, value) {
            var aoColumns = new Object;
            aoColumns['sTitle'] = value;
            aoColumns['sClass'] = 'genmed';
            aoColumnArray.push(aoColumns);
        });

现在构建数据表对象

            ticketTable= [];
        ticketTable.aaData = resultData.tickets;
        ticketTable.aaSorting = [[0, "asc"], [1, "desc"], [2, "desc"]];
        ticketTable.aoColumns = aoColumnArray;
        ticketTable.bJQueryUI = true;
        ticketTable.bScrollInfinite = true;
        ticketTable.bScrollCollapse = true;
        ticketTable.bDestroy = true;
        ticketTable.bDeferRender = true;
        ticketTable.iDisplayLength = 50;
        ticketTable.sScrollY = '400px';
        ticketTable.sDom = 'Rlfrtip';
        $('#ticketTable').dataTable(ticketTable);

使用您要使用的选项。重要的部分是处理resultData。 aaData＆amp; aoColumns是使用AJAX数据的地方。所有这些都是在ajax调用的成功函数中初始化的。

希望它会帮助别人！

jQuery dataTable AJAX填充

2 个答案: