datatables可以初始化多个表格,只需要使用jquery的选择器即可
这些表都是独立(即用户控制一个表上分页不会影响其他表格),但它们共享给定的初始化参数 (例如如果你指定的国际化文件,所有的表将显示你指定的语言)。此外,API 可以一起操作或者独立操作。
下面这个例子展示的是一行代码显示两个表格,通过table.display选择器
Name | Position | Office | Age | Salary |
---|---|---|---|---|
Name | Position | Office | Age | Salary |
Tiger Nixon | System Architect | Edinburgh | 61 | $320,800 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | $433,060 |
Sonya Frost | Software Engineer | Edinburgh | 23 | $103,600 |
Quinn Flynn | Support Lead | Edinburgh | 22 | $342,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | $217,500 |
Gavin Joyce | Developer | Edinburgh | 42 | $92,575 |
Martena Mccray | Post-Sales support | Edinburgh | 46 | $324,050 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | $75,650 |
Shad Decker | Regional Director | Edinburgh | 51 | $183,000 |
Name | Position | Office | Age | Salary |
---|---|---|---|---|
Name | Position | Office | Age | Salary |
Jena Gaines | Office Manager | London | 30 | $90,560 |
Haley Kennedy | Senior Marketing Designer | London | 43 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | $385,750 |
Michael Silva | Marketing Designer | London | 66 | $198,500 |
Bradley Greer | Software Engineer | London | 41 | $132,000 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | $1,200,000 |
Suki Burks | Developer | London | 53 | $114,500 |
Prescott Bartlett | Technical Author | London | 27 | $145,000 |
Timothy Mooney | Office Manager | London | 37 | $136,200 |
Bruno Nash | Software Engineer | London | 38 | $163,500 |
Hermione Butler | Regional Director | London | 47 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | $103,500 |
$(document).ready(function() { $('table.display').dataTable(); } );
<table id="" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>$320,800</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>$433,060</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>$103,600</td> </tr> <tr> <td>Quinn Flynn</td> <td>Support Lead</td> <td>Edinburgh</td> <td>22</td> <td>$342,000</td> </tr> <tr> <td>Dai Rios</td> <td>Personnel Lead</td> <td>Edinburgh</td> <td>35</td> <td>$217,500</td> </tr> <tr> <td>Gavin Joyce</td> <td>Developer</td> <td>Edinburgh</td> <td>42</td> <td>$92,575</td> </tr> <tr> <td>Martena Mccray</td> <td>Post-Sales support</td> <td>Edinburgh</td> <td>46</td> <td>$324,050</td> </tr> <tr> <td>Jennifer Acosta</td> <td>Junior Javascript Developer</td> <td>Edinburgh</td> <td>43</td> <td>$75,650</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>$183,000</td> </tr> </tbody> </table> <table id="" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>$90,560</td> </tr> <tr> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td>London</td> <td>43</td> <td>$313,500</td> </tr> <tr> <td>Tatyana Fitzpatrick</td> <td>Regional Director</td> <td>London</td> <td>19</td> <td>$385,750</td> </tr> <tr> <td>Michael Silva</td> <td>Marketing Designer</td> <td>London</td> <td>66</td> <td>$198,500</td> </tr> <tr> <td>Bradley Greer</td> <td>Software Engineer</td> <td>London</td> <td>41</td> <td>$132,000</td> </tr> <tr> <td>Angelica Ramos</td> <td>Chief Executive Officer (CEO)</td> <td>London</td> <td>47</td> <td>$1,200,000</td> </tr> <tr> <td>Suki Burks</td> <td>Developer</td> <td>London</td> <td>53</td> <td>$114,500</td> </tr> <tr> <td>Prescott Bartlett</td> <td>Technical Author</td> <td>London</td> <td>27</td> <td>$145,000</td> </tr> <tr> <td>Timothy Mooney</td> <td>Office Manager</td> <td>London</td> <td>37</td> <td>$136,200</td> </tr> <tr> <td>Bruno Nash</td> <td>Software Engineer</td> <td>London</td> <td>38</td> <td>$163,500</td> </tr> <tr> <td>Hermione Butler</td> <td>Regional Director</td> <td>London</td> <td>47</td> <td>$356,250</td> </tr> <tr> <td>Lael Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>$103,500</td> </tr> </tbody> </table>
http://datatables.net/examples/basic_init/multiple_tables.html
Translation from DataTables.net, with permission