排序功能我們使用Ajax功能來製作,原理是當使用者按下 往上 或 往下 按鈕時,取得要交換的id
資料,然後通知後端程式交換兩筆資料的 rank
欄位數值,藉此達到更換排序的目的,前端只需在後端交換完成後重新載入頁面,就會看到新的排序結果。
在頁面下方使用
jQuery
建立ajax
程式1
2
3
4
5
6
7
8
9
10
11
12
13
14<script>
//對所有的class='sw' 建立點擊事件
$(".sw").on("click",function(){
//取得要交換的id資料,並使用split函式拆成陣列
let id=$(this).data('sw').split("-")
//使用$.post()函式向後端傳送id陣列
$.post("./api/sw.php",{table:'poster',id},()=>{
//資料交換完畢後重整頁面
location.reload();
})
})
</script>在上方程式中我們傳送的資料除了id還有一個table的資料,這是因為院線片也會使用到排序的功能,為了提高程式碼的重用性,因此我們增加一個參數,讓交換排序的後端程式可以讓多個功能來共用。
建立
/api/sw.php
檔案,並撰寫資料交換程式1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23include_once "../base.php";
//將table變數的值進行首字母大寫轉換
$table=ucfirst($_POST['table']);
//取得對應的資料表資料
$row0=$$table->find($_POST['id'][0]);
$row1=$$table->find($_POST['id'][1]);
//建立一個暫存變數來儲存第一筆資料的rank值
$tmp=$row0['rank'];
//將第二筆資料的rank值指定給第一筆資料
$row0['rank']=$row1['rank'];
//將暫存變數的值指定給第二筆資料
$row1['rank']=$tmp;
//將第一筆資料更新回資料表
$$table->save($row0);
//將第二筆資料更新回資料表
$$table->save($row1);