javascript - 在 JQuery 选项卡中动态加载数据表

Question

我计划在我的一个项目中使用 JQuery Datatables，所以我决定做一个 POC 以确保一切都按计划进行。

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

我已经在J​​SFiddle上上传了代码！

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();
        });

标签： javascriptjquerydatatable

Answer 1

试试这个columns选项

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

演示