Datatables中文网

Html5数据属性

在有些情况下，显示的数据可能不是用来排序的，只是为了直观的展示给用户看，比如电话号码xxxx-xxxxxxxx，中间有一个斜杠，对于程序排序不怎么好处理 html5有 data-sort或者data-order来排序 ，data-filter或者data-search来搜索，下面的例子演示了， 显示的和搜索的是不同
以Tiger Nixon 为例，显示的是 T. Nixon，搜索的是Tiger Nixon

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
A. Cox Junior Technical Author San Francisco 66 Mon 12th Jan 09 $86,000/y
A. Satou Accountant Tokyo 33 Fri 28th Nov 08 $162,700/y
B. Williamson Integration Specialist New York 61 Sun 2nd Dec 12 $372,000/y
C. Hurst Javascript Developer San Francisco 39 Tue 15th Sep 09 $205,500/y
C. Kelly Senior Javascript Developer Edinburgh 22 Thu 29th Mar 12 $433,060/y
G. Winters Accountant Tokyo 63 Mon 25th Jul 11 $170,750/y
H. Chandler Sales Assistant San Francisco 59 Mon 6th Aug 12 $137,500/y
J. Gaines Office Manager London 30 Fri 19th Dec 08 $90,560/y
R. Davidson Integration Specialist Tokyo 55 Thu 14th Oct 10 $327,900/y
S. Frost Software Engineer Edinburgh 23 Sat 13th Dec 08 $103,600/y
Showing 1 to 10 of 11 entries
1
2
3
$(document).ready(function() {
        $('#example').dataTable();
    });
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<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 data-search="Tiger Nixon">T. Nixon</td>
                            <td>System Architect</td>
                            <td>Edinburgh</td>
                            <td>61</td>
                            <td data-order="1303686000">Mon 25th Apr 11</td>
                            <td data-order="320800">$320,800/y</td>
                        </tr>
                        <tr>
                            <td data-search="Garrett Winters">G. Winters</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>63</td>
                            <td data-order="1311548400">Mon 25th Jul 11</td>
                            <td data-order="170750">$170,750/y</td>
                        </tr>
                        <tr>
                            <td data-search="Ashton Cox">A. Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                            <td data-order="1231718400">Mon 12th Jan 09</td>
                            <td data-order="86000">$86,000/y</td>
                        </tr>
                        <tr>
                            <td data-search="Cedric Kelly">C. Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                            <td data-order="1332975600">Thu 29th Mar 12</td>
                            <td data-order="433060">$433,060/y</td>
                        </tr>
                        <tr>
                            <td data-search="Airi Satou">A. Satou</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>33</td>
                            <td data-order="1227830400">Fri 28th Nov 08</td>
                            <td data-order="162700">$162,700/y</td>
                        </tr>
                        <tr>
                            <td data-search="Brielle Williamson">B. Williamson</td>
                            <td>Integration Specialist</td>
                            <td>New York</td>
                            <td>61</td>
                            <td data-order="1354406400">Sun 2nd Dec 12</td>
                            <td data-order="372000">$372,000/y</td>
                        </tr>
                        <tr>
                            <td data-search="Herrod Chandler">H. Chandler</td>
                            <td>Sales Assistant</td>
                            <td>San Francisco</td>
                            <td>59</td>
                            <td data-order="1344207600">Mon 6th Aug 12</td>
                            <td data-order="137500">$137,500/y</td>
                        </tr>
                        <tr>
                            <td data-search="Rhona Davidson">R. Davidson</td>
                            <td>Integration Specialist</td>
                            <td>Tokyo</td>
                            <td>55</td>
                            <td data-order="1287010800">Thu 14th Oct 10</td>
                            <td data-order="327900">$327,900/y</td>
                        </tr>
                        <tr>
                            <td data-search="Colleen Hurst">C. Hurst</td>
                            <td>Javascript Developer</td>
                            <td>San Francisco</td>
                            <td>39</td>
                            <td data-order="1252969200">Tue 15th Sep 09</td>
                            <td data-order="205500">$205,500/y</td>
                        </tr>
                        <tr>
                            <td data-search="Sonya Frost">S. Frost</td>
                            <td>Software Engineer</td>
                            <td>Edinburgh</td>
                            <td>23</td>
                            <td data-order="1229126400">Sat 13th Dec 08</td>
                            <td data-order="103600">$103,600/y</td>
                        </tr>
                        <tr>
                            <td data-search="Jena Gaines">J. Gaines</td>
                            <td>Office Manager</td>
                            <td>London</td>
                            <td>30</td>
                            <td data-order="1229644800">Fri 19th Dec 08</td>
                            <td data-order="90560">$90,560/y</td>
                        </tr>
                                </tbody>
                </table>

http://datatables.net/examples/advanced_init/html5-data-attributes.html

Translation from DataTables.net, with permission