多个表格

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