Examples--Basic initialisation

Posted 2020-11-17 cuteguru

https://datatables.net/examples/index

 

1、DataTables的默认配置

$(document).ready(function() {
    $(‘#example‘).dataTable();
} );

 

2、DataTables的一些基础属性配置

$(document).ready(function() {
    $(‘#example‘).DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

 

3、数据排序

$(document).ready(function() {
    $(‘#example‘).DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

 

4、多列排序

$(document).ready(function() {
    $(‘#example‘).DataTable( {
        columnDefs: [ {
            targets: [ 0 ],
            orderData: [ 0, 1 ]
        }, {
            targets: [ 1 ],
            orderData: [ 1, 0 ]
        }, {
            targets: [ 4 ],
            orderData: [ 4, 0 ]
        } ]
    } );
} );

 

5、多表

$(document).ready(function() {
    $(‘table.display‘).DataTable();
} );

 

<table id="" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>$320,800</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table><table id="" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>$90,560</td>
            </tr>            
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>