DataTables Ajax 数据不起作用答案

【问题标题】：DataTables Ajax data not workingDataTables Ajax 数据不起作用
【发布时间】：2015-08-04 10:17:12
【问题描述】：

请参阅下面的代码，当使用innerData 时它可以工作，但是当使用outerData 时它不起作用并告诉我：

为第 0 行请求的未知参数“徽章”

我的innerData 和outerData 看起来一样，只是值不同。

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

编辑：Gyrocode.com 来自下面的评论建议JSON.parse(outerData)，它就像一个魅力。

$("#ButtonSearch").click(function(){
    try {
        companyCode = '<%=Session["comp_code"].ToString()%>';
        $.ajax({
            type: "POST",
            url: "MtForm.aspx/helloWorld",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: "{companyCode:" + JSON.stringify(companyCode) + "}",
            success: function(outerData){
                var innerData = [{"badge":"11111111","name":"John Doe","ext":"2222","dept_name":"3333"},{"badge":"44444444","name":"Jane Doe","ext":"5555","dept_name":"6666"}];

                $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"><thead><tr><th>Badge</th><th>Name</th><th>Ext.</th><th>Dept.</th></tr></thead></table>' );

                $('#example').dataTable({
                    "data": innerData,
                    "columns": [
                        { "data": 'badge' },
                        { "data": 'name' },
                        { "data": 'ext' },
                        { "data": 'dept_name' }
                    ]
                });                        
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
                console.log(status);
                console.log(error);
                alert("error");
            }
        });
    }
    catch(err) {
        alert('Javascript error: ' + err.message);
    }
});

【问题讨论】：

如果你console.log(outerData)，你能告诉我们控制台显示的内容吗？
它看起来和“innerData”一模一样，只是值不同。
日志：[{"badge":"XXXXXXXXX","name":"XXXXXXXX","ext":"","dept_name":"MIS"}]
删除cellpadding="0" cellspacing="0"。数据表不支持
试试"data": JSON.parse(outerData),。

标签： jquery ajax datatables

【解决方案1】：

DataTables 能够从 Ajax 获取的几乎任何 JSON 数据源中读取数据。这可以通过设置ajax 选项以最简单的形式完成。见documentation

在你的情况下，它应该是这样的：

   var table = $('#example').dataTable({
    "ajax": {
        "url": "MtForm.aspx/helloWorld",
        "data": function (d) {
            return JSON.stringify(
                $.extend( {}, d, {
                    "companyCode ": '<%=Session["comp_code"].ToString()%>'
                })
            )
        },
        type: "POST",
        contentType: "application/json",
    },
    deferLoading: true,
    "columns": [
        { "data": 'badge' },
        { "data": 'name' },
        { "data": 'ext' },
        { "data": 'dept_name' }
    ]
});  
// execute request when all necessary data were loaded
table.draw();

【讨论】：