javascript - 在 JQuery 选项卡中动态加载 DataTables

Question

我计划在我的一个项目中使用 JQuery Datatables，因此我决定进行 POC 以确保一切都已计划好。

我构建了一个表，我将在其中打印对象中的值，这些值将在我的进一步开发过程中以 JSON 形式接收。但我在要打印数据的 id 上收到 AJAX 错误。

我已将代码上传到 JSFiddle !

HTML

 <div id="tab-customers">
            <table id="customers-table" class="display general-table" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Gender</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
            </table>
        </div>

JQuery

 $(".tabs").click(function() {
                var source = $(this).data("source");
                var tableId = $(this).data("table");
                initiateTable(tableId, source);
            });
function initiateTable(tableId, source) {
                var table = $("#" + tableId).DataTable({
                    "ajax": source,
                    order: [],
                    columnDefs: [{
                        orderable: false,
                        targets: [0]
                    }],
                    "destroy": true,
                    "bFilter": true,
                    "bLengthChange": false,
                    "bPaginate": false
                });
            }
            initiateTable("customers-table", "customers");
            $("#dynamic-tabs").tabs();
        });

Answer 1

尝试columns选项

columns: [
    { "data": "Id" }, 
    { "data": "firstName" }, 
    { "data": "lastName" }, 
    { "data": "email" }, 
    { "data": "phone" }, 
    { "data": "gender" }, 
    { "data": "city" }, 
    { "data": "country" }
]

Demo