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

Posted 2023-05-09

【中文标题】无法通过服务器端处理显示 jQuery Datatable 的数据

【英文标题】：Unable to display data for jQuery Datatable with server side processing

【发布时间】：2021-06-30 20:59:24

【问题描述】：

我在 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"
            
        ]
    

【问题讨论】：

嗨@user18912521，你的jQuery代码data = JSON.stringify(data),是错误的，你应该使用:而不是=。

现在我简化了ajax调用但仍然没有成功

【参考方案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" ,
                ],
            );
    ;

测试结果：

【参考方案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"
            
    ]

【讨论】：

仍然没有成功