jquery.dataTables的用法

寫頁面前端時,使用表格的插件能夠快速漂亮的排版。本例子中使用jquery.dataTables來處理table。直接來點乾貨html

html代碼以下前端

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            <thead>
                <tr>
                    <th>time</th>
                    <th>name</th>
                    <th>number</th>
                </tr>
            </thead>
            
            <tbody>
                <tr>
                    <td>2016-01-1 10:10:10</td>
                    <td>baidu</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>2016-02-1 10:10:10</td>
                    <td>google</td>
                    <td>54</td>
                </tr>
                <tr>
                    <td>2016-01-1 10:15:10</td>
                    <td>360</td>
                    <td>21</td>
                </tr>
            </tbody>
        </table>

最簡單的初始化js代碼以下jquery

$(function(){
            var table= $("#example").DataTable();
});

注意:html代碼中須要定義thead,tbody。網站

結果以下:google

 

能夠看出他是自動排序的。spa

若是想要按照時間逆序排列,js代碼以下.net

    $(function(){
            var table= $("#example").DataTable({
                "order":[[0,"desc"]]
            });


        });

注意:查看文檔時要注意版本是否一致。當時我就是沒有在乎這個問題,在網上找了好多資料,就是各類試,各個版本還不同,最後按照官網寫的,照樣不行。最後下載官網的插件

最新jquery,dataTables按照dataTables官網的代碼寫這才能夠。因此,看文檔必定要注意版本是否一致。不要掉進這個坑。code

 

還有更多的屬性和方法沒有寫,若是感興趣能夠查看官方網站了解更多信息。https://datatables.net/htm

相關文章
相關標籤/搜索