Datatables中文网

行分组

此例子演示了以工作地点分组数据，同时隐藏工作地点这一列

NamePositionAgeStart dateSalary
NamePositionAgeStart dateSalary
Edinburgh
Tiger Nixon System Architect 61 2011/04/25 $320,800
Cedric Kelly Senior Javascript Developer 22 2012/03/29 $433,060
New York
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
San Francisco
Ashton Cox Junior Technical Author 66 2009/01/12 $86,000
Herrod Chandler Sales Assistant 59 2012/08/06 $137,500
Tokyo
Garrett Winters Accountant 63 2011/07/25 $170,750
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Airi Satou Accountant 33 2008/11/28 $162,700
Showing 1 to 25 of 39 entries
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
$(document).ready(function() {
    var table = $('#example').DataTable({
        "columnDefs": [{
            "visible": false,
            "targets": 2
        }],
        "order": [[2, 'asc']],
        "displayLength": 25,
        "drawCallback": function(settings) {
            var api = this.api();
            var rows = api.rows({
                page: 'current'
            }).nodes();
            var last = null;
 
            api.column(2, {
                page: 'current'
            }).data().each(function(group, i) {
                if (last !== group) {
                    $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group + '</td></tr>');
 
                    last = group;
                }
            });
        }
    });
 
    // 根据组排序
    $('#example tbody').on('click', 'tr.group',
    function() {
        var currentOrder = table.order()[0];
        if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
            table.order([2, 'desc']).draw();
        } else {
            table.order([2, 'asc']).draw();
        }
    });
});
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/row_grouping.html

Translation from DataTables.net, with permission