Datatables中文网

列渲染

这个例子演示了把年龄列隐藏，通过columns.render方法把年龄的值拼接到姓名列

更多关于render 的用法连接详见 columns.renderOption

NamePositionOfficeStart dateSalary
NamePositionOfficeStart dateSalary
Airi Satou (33) Accountant Tokyo 2008/11/28 $162,700
Ashton Cox (66) Junior Technical Author San Francisco 2009/01/12 $86,000
Brielle Williamson (61) Integration Specialist New York 2012/12/02 $372,000
Cedric Kelly (22) Senior Javascript Developer Edinburgh 2012/03/29 $433,060
Garrett Winters (63) Accountant Tokyo 2011/07/25 $170,750
Herrod Chandler (59) Sales Assistant San Francisco 2012/08/06 $137,500
Tiger Nixon (61) System Architect Edinburgh 2011/04/25 $320,800
Showing 1 to 7 of 7 entries
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
    $('#example').dataTable({
        "columnDefs": [{
            "render": function(data, type, row) {
                return data + ' (' + row[3] + ')';
            },
            "targets": 0
        },
        {
            "visible": false,
            "targets": [3]
        }]
    });
});


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
</tr>
</thead>
 
<tfoot>
<tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
</tr>
</tfoot>
 
<tbody>
<tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
</tr>
<tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
</tr>
<tr>
    <td>Ashton Cox</td>
    <td>Junior Technical Author</td>
    <td>San Francisco</td>
    <td>66</td>
    <td>2009/01/12</td>
    <td>$86,000</td>
</tr>
<tr>
    <td>Cedric Kelly</td>
    <td>Senior Javascript Developer</td>
    <td>Edinburgh</td>
    <td>22</td>
    <td>2012/03/29</td>
    <td>$433,060</td>
</tr>
<tr>
    <td>Airi Satou</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>33</td>
    <td>2008/11/28</td>
    <td>$162,700</td>
</tr>
<tr>
    <td>Brielle Williamson</td>
    <td>Integration Specialist</td>
    <td>New York</td>
    <td>61</td>
    <td>2012/12/02</td>
    <td>$372,000</td>
</tr>
<tr>
    <td>Herrod Chandler</td>
    <td>Sales Assistant</td>
    <td>San Francisco</td>
    <td>59</td>
    <td>2012/08/06</td>
    <td>$137,500</td>
</tr>
</tbody>
</table>

http://datatables.net/examples/advanced_init/column_render.html

Translation from DataTables.net, with permission