MVC 问题在按钮单击时从 JSon 对象填充 JQuery DataTable

Posted 2023-05-08

【中文标题】MVC 问题在按钮单击时从 JSon 对象填充 JQuery DataTable

【英文标题】：MVC Problem Populating JQuery DataTable From JSon Object on Button Click

【发布时间】：2020-09-01 18:43:30

【问题描述】：

我有一个带有 JQuery 数据表的 MVC 页面，当用户单击查询按钮时我想填充它。

这是我的数据表：

<table id="mytable" class="table table-striped table-bordered mt-5">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>

    </tr>
</thead>
<tbody></tbody>
</table>

这里是我初始化表格的地方（页面加载时表格是空的，直到用户点击查询按钮才被填充）：

$('#mytable').DataTable(
    processing: true, // for show progress bar
    order: [[2, "desc"]],
    dataSrc: 'vm',
    dom: 'rfltip',
    bRetrieve: true,
    iDisplayLength: 50,
    columns: [
         "data": "COL1" ,
         "data": "COL2" ,
         "data": "COL3" ,
         "data": "COL4" ,
         "data": "COL5" ,
         "data": "COL6" ,
         "data": "COL7" 
    ]
);

这是当用户点击查询按钮时被调用的函数：

function QueryEvents() 
      $.ajax(
            url: "/MyController/MyJsonRequest",
            type: "get",
            data: 
                id: $("#id").val()
            ,
            error: function (response) 

                console.log("response: " + response);
            

        )
        .done(function (result)               

            var table = $('#mytable').DataTable();
            table.clear().draw();
            console.log('good to here' + JSON.stringify(result));
            table.rows.add(result).draw();

        );
;

对控制器的调用正在查找并返回一个 Json 对象。这是 console.log 条目中的对象列表，所以我知道正在返回数据：

good to here"vm":["COL1":"0000000017","COL2":"Balance - 4 Place","COL3":"2334234","COL4":"INS1234","COL5":"smith, joe","COL6":"Yearly Maint","COL7":"/Date(1582314988910)/","COL1":"0000000018","COL2":"Balance - 4 Place","COL3":"2334234","COL4":"INS1234","COL5":"jones, billy","COL6":"Yearly Maint","COL7":"/Date(1582314988910)/"]

它是格式良好的 json，我没有收到任何错误，但未填充数据表。不确定我错过了什么？

【参考方案1】：

以下是您在控制台上打印的对象。

"vm":["COL1":"0000000017","COL2":"Balance - 4 Place","COL3":"2334234","COL4":"INS1234","COL5":"smith, joe","COL6":"Yearly Maint","COL7":"/Date(1582314988910)/","COL1":"0000000018","COL2":"Balance - 4 Place","COL3":"2334234","COL4":"INS1234","COL5":"jones, billy","COL6":"Yearly Maint","COL7":"/Date(1582314988910)/"]

但DataTable只需要内部数组。

["COL1":"0000000017","COL2":"Balance - 4 Place","COL3":"2334234","COL4":"INS1234","COL5":"smith, joe","COL6":"Yearly Maint","COL7":"/Date(1582314988910)/","COL1":"0000000018","COL2":"Balance - 4 Place","COL3":"2334234","COL4":"INS1234","COL5":"jones, billy","COL6":"Yearly Maint","COL7":"/Date(1582314988910)/"]

所以你应该使用

table.rows.add(result.vm).draw();

而不是

table.rows.add(result).draw();