Datatables中文网

该示例展示了Datatables使用对象数据，在最简单的情况下可以读取任意对象的属性，而且只要符合javascript标准，可以扩展到n层的嵌套对象/数组

下面的hr对象包含了position、salary、start_date三个属性，contact包含两个数据，通过数组下标的方式取值

下面例子的数据模型如下：
{ "name": "Tiger Nixon", "hr": { "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25" }, "contact": [ "Edinburgh", "5421" ] }

NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
Airi SatouAccountantTokyo54072008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London57972009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco15622009/01/12$86,000
Bradley GreerSoftware EngineerLondon25582012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco13142011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York48042012/12/02$372,000
Bruno NashSoftware EngineerLondon62222011/05/03$163,500
Caesar VancePre-Sales SupportNew York83302011/12/12$106,450
Cara StevensSales AssistantNew York39902011/12/06$145,600
Cedric KellySenior Javascript DeveloperEdinburgh62242012/03/29$433,060
Showing 1 to 10 of 57 entries
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "ajax": "data/objects_deep.txt",
        "columns": [
            { "data": "name" },
            { "data": "hr.position" },
            { "data": "contact.0" },
            { "data": "contact.1" },
            { "data": "hr.start_date" },
            { "data": "hr.salary" }
        ]
    } );
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

http://datatables.net/examples/ajax/deep.html

Translation from DataTables.net, with permission