JQuery Ajax 排序可用于客戶端對數(shù)據(jù)進(jìn)行排序,從而使得數(shù)據(jù)呈現(xiàn)更加清晰、有序。通過 JQuery Ajax 排序,用戶可以輕松地使用拖拽、點擊或其它形式進(jìn)行排序,無需等待新的頁面載入或刷新。下面我們來了解如何使用 JQuery Ajax 排序:
$( document ).ready(function() { $( ".sortable" ).sortable({ update: function( event, ui ) { var order = $(this).sortable('toArray'); $.ajax({ url: "sort.php", type: "POST", data: { "order": order }, success: function(response) { console.log('排序已更新'); } }); } }); });
以上代碼實現(xiàn)了將一個類名為 ".sortable" 的元素中的子元素進(jìn)行排序,排序完成后將序號順序通過 AJAX 傳遞到 sort.php,然后在控制臺輸出 "排序更新" 等信息的功能。
其中,".sortable" 是指定的可排序元素的類名;"update" 事件中的代碼是定義拖拽結(jié)束調(diào)用的功能。實際上,我們所做的就是定義排序后的數(shù)據(jù)通過 POST 方式提交到后臺 PHP 文件中,以便進(jìn)行數(shù)據(jù)的更新和保存。
最后,我們需要寫一個 sort.php 后臺文件讀取數(shù)據(jù),進(jìn)行排序和更新,將最新的排序數(shù)據(jù)返回給前端頁面。排序完成后,我們就可以得到一份有序化的數(shù)據(jù)列表,使得數(shù)據(jù)在前端呈現(xiàn)更加美觀、有序、易于查找。
上一篇大白css