Datatables中文网

在某些情况下你可能需要自动创建内容，这时你可以使用 columns.renderDT 参数，来渲染每一行数据
对于简单的静态的数据可以使用 columns.defaultContentDT 参数

本示例演示如何使用 columns.defaultContentDT 在表的最后一列中创建按钮并添加点击事件，通过 row().data()DT 方法得到这行的数据，并alert出相关信息

此外注意到列中的 columns.dataDT 选项已被设置为 null，表示列不会获得数据源对象的信息。

NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
Airi SatouAccountantTokyo54072008/11/28
Angelica RamosChief Executive Officer (CEO)London57972009/10/09
Ashton CoxJunior Technical AuthorSan Francisco15622009/01/12
Bradley GreerSoftware EngineerLondon25582012/10/13
Brenden WagnerSoftware EngineerSan Francisco13142011/06/07
Brielle WilliamsonIntegration SpecialistNew York48042012/12/02
Bruno NashSoftware EngineerLondon62222011/05/03
Caesar VancePre-Sales SupportNew York83302011/12/12
Cara StevensSales AssistantNew York39902011/12/06
Cedric KellySenior Javascript DeveloperEdinburgh62242012/03/29
Showing 1 to 10 of 57 entries
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "data/arrays.txt",
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        } ]
    } );
 
    $('#example tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );
} );
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/null_data_source.html

Translation from DataTables.net, with permission