Jquery Ajax Table是一種能夠實現數據動態更新的表格,能夠方便地對表格進行修改、刪除、增加等操作。
$(document).ready(function() { $("#myTable").dataTable(); // 處理表格修改事件 $(document).on("click", ".editBtn", function() { var td = $(this).closest("tr").children("td"); var id = td.eq(0).text(); var name = td.eq(1).text(); var email = td.eq(2).text(); $("#id").val(id); $("#name").val(name); $("#email").val(email); $("#myModal").modal("show"); }); // 處理表格刪除事件 $(document).on("click", ".deleteBtn", function() { var td = $(this).closest("tr").children("td"); var id = td.eq(0).text(); $.ajax({ type: "POST", url: "delete.php", data: { "id": id }, success: function(response) { window.location.reload(); } }); }); // 處理表單提交事件 $("#myForm").submit(function(e) { e.preventDefault(); var id = $("#id").val(); var name = $("#name").val(); var email = $("#email").val(); $.ajax({ type: "POST", url: "save.php", data: { "id": id, "name": name, "email": email }, success: function(response) { window.location.reload(); } }); }); });
該代碼中,$(document).ready(function() {})函數是在文檔加載完成后執行的,其中$("#myTable").dataTable()是一個插件,實現了對表格的排序、搜索等功能。接下來,我們處理表格的修改和刪除事件,在點擊對應的按鈕時,獲取該行的數據,并以模態框或彈窗的方式顯示出來。當數據修改或刪除后,通過ajax發送請求,調用對應的PHP腳本實現數據的持久化操作,最后調用window.location.reload()方法,重新加載頁面,實現數據的動態更新。