无法通过服务器端处理显示 jQuery Datatable 的数据

Question

我在 ASP.NET Core 3.1 中遇到了 jQuery Datatable 服务器端处理的问题。服务器端以 JSON 格式返回数据，但未在 Datatable 中显示。

下面是我的控制器端代码

public IActionResult LoadData()
{
    var dict = Request.Form.ToDictionary(x => x.Key, x => x.Value.ToString());
    var draw = dict["draw"];
    var start = dict["start"];
    var length = dict["length"];
    
    ////Find Order Column
    var sortColumn = "Company";
    var sortColumnDir = "asc"; 
    int pageSize = length != null ? Convert.ToInt32(length) : 0;
    int skip = start != null ? Convert.ToInt32(start) : 0;
    
    DataSet ddata = GenralClass.GetCRMTestData((Convert.ToInt32(draw)-1)*100, 100);//GetCRMData();
    ddata.Tables[0].TableName = "data";
    var data = ddata;
     
    int recordsTotal = 34790;
     
    var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data };
    return Ok(JsonConvert.SerializeObject(jsonData));
}

下面是我的视图侧代码

<table class="table table-striped table-bordered table-hover dataTables-example">
    <thead>
        <tr>
    
            <th style="white-space: nowrap;">Company</th>
            <th style="white-space: nowrap;">Assignedto</th>
            <th style="white-space: nowrap;">Provider</th>
    
    
    
        </tr>
    </thead>
                          
                           
</table>

下面是我的 Jquery 代码。

$(document).ready(function () {
    
    $('.dataTables-example').DataTable({
        pageLength: 100,
        processing: true,
        serverSide: true,   
        ajax: {
            url: '@Url.Action("LoadData", "SKU")',
            type: 'POST',              
            dataType: "json",                        
            columns: [
                { "data": "Company" },
                { "data": "Assignedto" },
                { "data": "Provider" },
            ]                       
        }
    });
});

我在服务配置中的 startup.cs 文件中做了一些更改，如下所示

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews()
            .AddNewtonsoftJson(options =>
            {
                options.SerializerSettings.Converters.Add(new StringEnumConverter());
            });
        
    services.AddControllers();
    services.AddRazorPages();

    services.AddDbContext<AppDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("AppDb")));
}

页面加载空表时不显示错误。我从 chrome 网络验证数据是从服务器端返回的，如下所示。我不知道为什么数据没有显示有什么问题。显示正确的页码，但未显示数据。任何帮助。

{
    "draw":"1",
    "recordsFiltered":34790,
    "recordsTotal":34790,
    "data":{
        "data":[
            {
                "Company":"SHAN FOODS (PVT) LTD",
                "Assignedto":"Stock-Transfer",
                "Provider":"Stock-Transfer"
            },
            {
                "Company":"SHAN FOODS (PVT) LTD",
                "Assignedto":"Vermicelli (150gm)",
                "Provider":"030180010017"
            }
        ]
    }
}

Answer 1

您可以按如下方式更改您的代码。

加载数据：

public IActionResult LoadData()
{
    //...
    var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data };
    return new JsonResult(new {json = jsonData });
}

jquery：

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "/SKU/LoadData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
    });
});
    function OnSuccess(response) {         
        $('.dataTables-example').DataTable(
            {
                data: response.json.data,
                columns: [
                    { "data": "company" },
                    { "data": "assignedto" },
                    { "data": "provider" },
                ],
            });
    };

测试结果：

Answer 2

像下面这样改变你的 json

{
    "draw":"1",
    "recordsFiltered":34790,
    "recordsTotal":34790,
    "data":[
            {
                "Company":"SHAN FOODS (PVT) LTD",
                "Assignedto":"Stock-Transfer",
                "Provider":"Stock-Transfer"
            },
            {
                "Company":"SHAN FOODS (PVT) LTD",
                "Assignedto":"Vermicelli (150gm)",
                "Provider":"030180010017"
            }
    ]
}