Question

我很少使用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。 The documentations says so

dataSrc: function(data) {
    return data;
}

这确实可以“工作”，表格中没有数据，至少是对success的改进。

这是我的带有dataSrc属性的表格的外观。

文档对此充其量是含糊的，或者至少我似乎找不到与我的问题相关的东西。

我希望发生的事情是：进行ajax调用，将数据用于一些回调，而无论如何都不会改变原始值。做我的事情，返回原始数据，就是这样。

很显然，这里不是这样。

如果有人可以在这里直接指出我的意思，

Answer 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.
        ],
    });
}

数据表Ajax回调不填充表

1 个答案: