开发者问题收集

数据表 ajax 回调不会填充表格

2018-12-14
1009
javascript ajax datatable datatables

我很少甚至从来不用 javascript，所以我相当确定这要么是配置错误，要么是我遗漏了什么。

我正在使用 Datatables v1.10.7 。我有一张表格，它包含所有必要的必需参数， thead 、 tfoot 和 tbody 。按此顺序。

我正在使用服务器端处理来获取一些数据并填充表格。

由于我想添加一些与数据表无关但与它获取的数据相关的其他内容，所以我想要一个回调函数。 

$('#target-list-li').DataTable({
    processing: true,
    serverSide: true,
    pageLength: 100,
    ajax: {
        url: ajax_url,
        success: function(data) {
            // Do other stuff here
            return data;
        }
    },

    columns: [
        {
            data: 'trans_source_id',
            render: function (data, type, row) {
                var html = '';

                html += '<input type="checkbox" id="check-' + row.trans_source_id + '" ';

            },
            orderable: false
        },

        // more columns would go here but I've removed them since it's irrelevant to the question
});

“问题”或对它的误解可能在于这段代码 success: function(data) 。

我希望能够对数据进行一些处理，然后返回数据。 请注意，我并没有以任何方式更改原始数据，我只是想从中提取一些信息 。 

success: function(data) {
    // Some some stuff here
    return data;
}

但是这根本不起作用。即使我只是返回数据，表格也不会被填充。事实上，它只是挂在 ajax 调用上。它确实完成了，但没有填充任何内容。

在此处输入图像描述

ajax 的推荐选项显然是 dataSrc 。 文档是这么说的 

dataSrc: function(data) {
    return data;
}

这确实“有点”有效，表中没有数据，至少比 成功 有所改进。

这是我的表格带有 dataSrc 属性的样子。

在此处输入图像描述

文档对此的描述含糊不清，或者至少我似乎找不到与我的问题相关的内容。

我期望发生的是：让 ajax调用，使用数据进行一些回调，同时不以任何方式改变原始数据。做我的事情，返回原始数据，就是这样。

显然这里的情况并非如此。

如果有人能指出我的正确方向，我将不胜感激。

1个回答

我曾经在一个项目中使用过 Datatables 插件，其常用方法是：

1) 首先通过 ajax post 向服务器发送数据。

2) 一旦服务器响应 data ，就使用 success 回调根据需要处理数据，最后创建并呈现 table 。

对于您拥有的代码示例，方法将是这样的： 

// First, make an ajax post to get data from the server.

$.ajax({
    type: "POST", /* You could use GET if the server support it */
    dataType: "json" /* Use the adequate type for your case */,
    url: ajax_url,
    success: function(data)
    {
        // Log the data to check the structure.
        console.log(data);

        // Pre-process data here...

        // Create and render the datatable.
        // We assume, "data.data" holds the source data for the table.
        createDatatable(data.data);
    },
    error: function()
    {
        alert('Failed to get data from server');
    }
});

// Method for create and render the datatable.

function createDatatable(srcData)
{    
    $('#target-list-li').DataTable({
        pageLength: 100,
        data: srcData,
        columns: [
            {
                data: 'trans_source_id',
                render: function (data, type, row)
                {
                    var html = '';
                    var sId = row.trans_source_id;
                    html += '<input type="checkbox" id="check-' + sId + '" ';
                },
                orderable: false
            },
            // More columns would go here but I've removed them since
            // it's irrelevant to the question.
        ],
    });
}
Shidersz
2018-12-14