DataTables Ajax数据不起作用

时间:2015-08-04 10:17:12

标签: jquery ajax datatables

请参阅下面的我的代码,它在使用innerData时有效,但在使用outerData时,它无效并告诉我:

  

请求第0行的未知参数'badge'

我的innerDataouterData看起来相同,只是值不同。

如果有人能指出我正确的方向,请欣赏它。

编辑: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);
    }
});

1 个答案:

答案 0 :(得分:0)

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();