<h1>DataTables example <span>HTML5 data-* attributes - cell data</span></h1>
<divclass="info">
<p>DataTables can use different data for different actions (display, ordering and searching) which can be immensely powerful for transforming data in the display to be intuitive for the end user, while using different, or more complex data, for other actions. For example, if a table contains a formatted telephone number in the format <code>xxx-xxxx</code>, intuitively a user might search for the number but without a dash. Using orthogonal data for searching allows both forms of the telephone number to be used, while only the nicely formatted number is displayed in the table.</p>
<p>One method in which DataTables can obtain this orthogonal data for its different actions is through <ahref="http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom HTML5 data attributes</a>. DataTables will automatically detect four different attributes on the HTML elements:</p>
<ulclass="markdown">
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
</ul>
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In this case the first column has been formatted so the first name has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it, the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
</div>
<tableid="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><tddata-search="Tiger Nixon">T. Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><tddata-order="1303689600">Mon 25th Apr 11</td><tddata-order="320800">$320,800/y</td></tr><tr><tddata-search="Garrett Winters">G. Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><tddata-order="1311552000">Mon 25th Jul 11</td><tddata-order="170750">$170,750/y</td></tr><tr><tddata-search="Ashton Cox">A. Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><tddata-order="1231718400">Mon 12th Jan 09</td><tddata-order="86000">$86,000/y</td></tr><tr><tddata-search="Cedric Kelly">C. Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><tddata-order="1332979200">Thu 29th Mar 12</td><tddata-order="433060">$433,060/y</td></tr><tr><tddata-search="Airi Satou">A. Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><tddata-order="1227830400">Fri 28th Nov 08</td><tddata-order="162700">$162,700/y</td></tr><tr><tddata-search="Brielle Williamson">B. Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><tddata-order="1354406400">Sun 2nd Dec 12</td><tddata-order="372000">$372,000/y</td></tr><tr><tddata-search="Herrod Chandler">H. Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><tddata-order="1344211200">Mon 6th Aug 12</td><tddata-order="137500">$137,500/y</td></tr><tr><tddata-search="Rhona Davidson">R. Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><tddata-order="1287014400">Thu 14th Oct 10</td><tddata-order="327900">$327,900/y</td></tr><tr><tddata-search="Colleen Hurst">C. Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>39</td><tddata-order="1252972800">Tue 15th Sep 09</td><tddata-order="205500">$205,500/y</td></tr><tr><tddata-search="Sonya Frost">S. Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><tddata-order="1229126400">Sat 13th Dec 08</td><tddata-order="103600">$103,600/y</td></tr><tr><tddata-search="Jena Gaines">J. Gaines</td><td>Office Manager</td><td>London</td><td>30</td><tddata-order="1229644800">Fri 19th Dec 08</td><tddata-order="90560">$90,560/y</td></tr><tr><tddata-search="Quinn Flynn">Q. Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><tddata-order="1362268800">Sun 3rd Mar 13</td><tddata-order="342000">$342,000/y</td></tr><tr><tddata-search="Charde Marshall">C. Marshall</td><td>Regional Director</td><td>San Francisco</td><td>36</td><tddata-order="1224115200">Thu 16th Oct 08</td><tddata-order="470600">$470,600/y</td></tr><tr><tddata-search="Haley Kennedy">H. Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><tddata-order="1355788800">Tue 18th Dec 12</td><tddata-order="313500">$313,500/y</td></tr><tr><tddata-search="Tatyana Fitzpatrick">T. Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><tddata-order="1268784000">Wed 17th Mar 10</td><tddata-order="385750">$385,750/y</td></tr><tr><tddata-search="Michael Silva">M. Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><tddata-order="1353974400">Tue 27th Nov 12</td><tddata-order="198500">$198,500/y</td></tr><tr><tddata-search="Paul Byrd">P. Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>64</td><tddata-order="1276041600">Wed 9th Jun 10</td><tddata-order="725000">$725,000/y</td></tr><tr><tddata-search="Gloria Little">G. Little</td><td>Systems Administrator</td><td>New York</td><td>59</td><tddata-order="1239321600">Fri 10th Apr 09</td><tddata-order="237500">$237,500/y</td></tr><tr><tddata-search="Bradley Greer">B. Greer</td><td>Software Engineer</td><td>London</td><td>41</td><tddata-order="1350086400">Sat 13th Oct 12</td><tddata-order="132000">$132,000/y</td></tr><tr><tddata-search="Dai Rios">D. Ri
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
<codeclass="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using <ahref="//datatables.net/manual/server-side">the protocol described in the DataTables documentation</a>.</p>
Please refer to the <ahref="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <ahref="http://www.datatables.net/extensions">extensions</a> and <ahref="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
