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