JQuery DataTable是一款強大的表格插件,它提供了許多對表格數(shù)據(jù)排序、搜索、分頁等關(guān)鍵功能的支持。下面是一份完整的JQuery DataTable例子:
<script> $(document).ready(function() { $('#example').DataTable( { "ajax": "data.json", "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "salary" } ] } ); } ); </script> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Salary</th> </tr> </thead> </table>
在這個例子中,我們使用了jQuery的ready方法來等待頁面結(jié)構(gòu)加載完畢后再執(zhí)行代碼。在ready方法中,我們使用DataTable初始化了一個表格,并設(shè)置了一個JSON數(shù)據(jù)源 - "data.json"。接下來,我們定義了表格的四列數(shù)據(jù)。
接下來,我們在HTML文件中創(chuàng)建了一個包含表頭的空表格。在初始化DataTable的時候,它會自動將數(shù)據(jù)填充到我們的表格中。
需要注意的是,在使用DataTable時,我們需要在表頭和表格中添加一些類和屬性來提供樣式和特定的功能。在這個例子中,我們?yōu)楸砀裉砑恿?display"類,使其可以被DataTable插件找到。具體的類和屬性可以在插件文檔中找到。
JQuery DataTable是一個非常強大的插件,能夠輕松實現(xiàn)許多重要的表格功能。這個例子可以幫助您開始使用它,創(chuàng)建出極具交互性和可操作性的表格數(shù)據(jù)!