Question

这不仅应该是一个简单的操作，而且我也可以跟随documentation。我有一个返回json数据集的ajax调用。我已经成功清除了表格但是当调用success方法时没有任何反应。 console语句显示正在返回数据...但表仍为空。知道为什么吗？

JS

    $('#SortByCoverage').click(function () {
        var table = $('#theTable').DataTable();
        table.fnClearTable();

        $.ajax({
            url: '/Home/Question2',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log(data);                    
                $("#thetable").dataTable({
                    "aaData": data,
                    "aoColumns": [
                        {title:"AdId"},
                        {title:"BrandId"},
                        {title:"BrandName"},
                        {title:"NumPages"},
                        {title:"Position"}
                        ]                        
                });
            }
        });

服务器端代码

    public JsonResult Question2()
    {
        var ads = _client.GetAdDataByDateRange(new DateTime(2011, 1, 1), new DateTime(2011, 4, 1));
        var json = ads.Where(x => x.Position.Equals("Cover") && x.NumPages >= (decimal)0.5).Select(x => new{
            AdId = x.AdId,
            BrandId = x.Brand.BrandId,
            BrandName = x.Brand.BrandName,
            NumPages = x.NumPages,
            Position = x.Position
        });

        return Json(json, JsonRequestBehavior.AllowGet);
    }

示例数据（客户端）

修改

正如评论中所指出的，我拼错了dataTable回调中的元素名称success。但是，现在我收到以下错误：

无法重新初始化DataTable。要检索此表的DataTables对象，请不传递参数或查看bRetrieve和bDestroy的文档

重新加载数据后，我是否真的需要销毁表格？

我添加了bRetrieve和bDestroy。这摆脱了错误，但仍然没有新的数据加载到表中。

    $.ajax({
        url: '@Url.Action("Question2", "Home")',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            console.log(data);
            $("#theTable").dataTable({
                //"bRetrieve": true,
                "bDestroy": true,
                "aaData": data,
                "aoColumns": [
                    {title:"AdId"},
                    {title:"BrandId"},
                    {title:"BrandName"},
                    {title:"NumPages"},
                    {title:"Position"}
                    ]                        
            });
        }
    });

Answer 1

我会有所不同，看看如何：

var theTable = $("#thetable").dataTable({
    "aaData": [],
    "aoColumns": [
        {data:"AdId"},
        {data:"BrandId"},
        {data:"BrandName"},
        {data:"NumPages"},
        {data:"Position"}
        ]                        
}).DataTable();

$('#SortByCoverage').click(function () {    
        $.ajax({
            url: '/Home/Question2',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
              theTable.clear().draw();
              table.rows.add(data)
                .draw();                    

            }
        });

数据表不会重新加载json数据

1 个答案: