未填充 JTable

Question

我的表格正在加载但没有数据...这就是我设置 javascript 来处理它的方式...

<script type="text/javascript">

    $(document).ready(function () {
        $('#btnEmployeeTableLoad').click(function () {
            $('#EmployeeTable').jtable({
                paging: true,
                pageSize: 10,
                sorting: true,
                defaultSorting: 'employeeName ASC',
                actions: {
                    listAction: 'https://localhost:44328/api/employee-information',
                    //deleteAction: '/Home/DeletePerson',
                    //updateAction: '/Home/UpdatePerson',
                    //createAction: '/Home/CreatePerson'
                },
                fields: {
                    employeeName: {
                        title: 'employeeName',
                        width: '35%'
                    },
                    employeeAddress: {
                        title: 'employeeAddress',
                        width: '15%'
                    },
                    employeeManager: {
                        title: 'employeeManager',
                        width: '15%'
                    },
                    prevExperience: {
                        title: 'prevExperience',
                        width: '15%'
                    }
                }
            });
            $('#EmployeeTable').jtable('load');
        });
    });

</script>

我的 ListData 和 ListData.Count 都显示 752 行，所以我知道数据正在从服务器检索

return Json(new { Result = "OK", Records = ListData, TotalRecordCount = ListData.Count });

编辑
这是我的浏览器中“网络”选项卡显示的内容：

{result: "OK",…}
records: [{employeeName: "Employee Name 1", employeeAddress: "Test Address 1", employeeManager: "Test Manager 1", prevExperience: "No"},…]
result: "OK"
totalRecordCount: 757

编辑 2
这些是我包含的库

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jtable@2.6.0/lib/jquery.jtable.min.js"></script>
<link href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/jtable@2.6.0/lib/themes/metro/blue/jtable.css" rel="stylesheet">

Answer 1

问题肯定出在 API 服务器上。

您的 API 是否支持 POST 调用？因为根据 jtable 文档。

如果您将 listAction 定义为 URL 字符串，那么，当您使用加载 方法，jTable 对这个 URL 地址进行 AJAX POST 以获取列表 记录

还要确保响应 JSON 响应必须与结构匹配。

{
    "Result": "OK",
    "Records": [
        {
            "prevExperience": 2,
            "employeeName": "Douglas Adams",
            "employeeManager": "Simon",
            "employeeAddress": "Washigton"
        }
    ]
}

如果您想拨打GET，listAction 应该是function 而不是string

                actions: {
                        listAction: function () {
                            console.log("Loading from custom function...");
                            return $.Deferred(function ($dfd) {
                                $.ajax({
                                    url: "https://localhost:44328/api/employee-information/",
                                    type: 'GET',
                                    dataType: 'json',
                                    success: function (data) {
                                        console.log("Success");
                                        $dfd.resolve(data);
                                    },
                                    error: function () {
                                        console.log("Error");
                                        $dfd.reject();
                                    }
                                });
                            });
                        }
                    }

在您的情况下，输出 JSON 的结构为 {result: "OK", records: []}

您需要将其转换为 {Result: "OK", Records: []} 才能使 jtable 工作。这可以在 ajax 调用成功处理程序中完成，如下所示。

                actions: {
                    listAction: function (postData, jtParams) {
                        return $.Deferred(function ($dfd) {
                            $.ajax({
                                url: 'https://localhost:44328/api/employee-information?' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
                                type: 'GET',
                                dataType: 'json',
                                success: function (data) {
                                    $dfd.resolve({ Records: data.records, Result: data.result, TotalRecordCount: data.totalRecordCount });
                                },
                                error: function () {
                                    $dfd.reject();
                                }
                            });
                        });
                    }
                }

Codepen 链接到您的代码。

https://codepen.io/nithinthampi/pen/zYYwgLq

带有GET的虚拟服务器。

https://RoundPungentProject.nithinthampi.repl.co