jQuery Bootstable是一款基于jQuery的開源插件,可以快速創(chuàng)建并修飾Bootstrap表格。它提供了一些十分方便的功能,如數(shù)據(jù)填充、排序、過濾、分頁等,使得數(shù)據(jù)的展現(xiàn)和交互更加友好易操作。
使用jQuery Bootstable,我們只需要定義一個類似下面這樣的表格:
<table id="table"> <thead> <tr> <th data-sortable="true">ID</th> <th data-sortable="true">Name</th> <th data-sortable="true">Price</th> <th data-visible="false">Description</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Apple</td> <td>5.99</td> <td>This is an apple.</td> </tr> <tr> <td>2</td> <td>Orange</td> <td>3.99</td> <td>This is an orange.</td> </tr> </tbody> </table>
然后,我們在JavaScript中調(diào)用jQuery Bootstable來對表格進(jìn)行修飾:
$(document).ready(function() { $('#table').bootstable(); });
以上代碼將使得表格具有排序和分頁功能,并且隱藏了描述列。另外,我們也可以對表格進(jìn)行數(shù)據(jù)填充和搜索:
// Add new row $('#table').bootstable('addRow', { id: 3, name: 'Banana', price: 2.99, description: 'This is a banana.' }); // Search $('#table').bootstable('search', 'apple');
最后,為了滿足更多個性化需求,jQuery Bootstable也提供了例如樣式、按鈕、事件等多種擴(kuò)展信息,詳見官方文檔。