JQuery Datatable是一個非常方便的表格插件,它可以使我們的表格擁有更加漂亮的樣式和更高效的功能。在使用過程中,我們經常需要刷新表格內容,讓數據及時更新。那么該如何使用Datatable進行刷新呢?
首先,在HTML中我們需要引入Datatable的JS和CSS文件,代碼如下:
<!-- Datatable CSS --> <link rel="stylesheet" type="text/css" > <!-- jQuery library --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Datatable JS --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
接著,我們需要使用Datatable初始化表格,代碼如下:
<table id="example"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>張三</td> <td>22</td> </tr> <tr> <td>2</td> <td>李四</td> <td>25</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable(); }); </script>
當我們需要刷新Datatable表格時,可以使用table.ajax.reload()方法實現。具體代碼如下:
<script type="text/javascript"> $(document).ready(function() { var table = $('#example').DataTable(); $('#refresh-btn').click(function() { table.ajax.reload(null, false); }); }); </script>
在上面的代碼中,我們添加了一個按鈕,當用戶點擊按鈕時,會調用ajax.reload()方法,實現刷新表格的功能。需要注意的是,ajax.reload()方法有兩個參數,第一個參數是數據源,我們這里傳入null表示使用當前數據源;第二個參數表示是否重繪表格,默認為true,即重繪表格。
綜上所述,使用Datatable刷新表格的方法非常簡單。在代碼中使用table.ajax.reload()方法即可實現表格的自動刷新。希望這篇文章能夠幫助大家解決相關問題。