已刪文
有更新了,要像這樣
function modalTable_WEBAPI_event(Order = 'desc', OrderColumn = 'id') {
const getToken = localStorage.getItem("token");
var getData;
var rowData;
var currentPage = 1;
var saved_json_rowData = [];
newValue = localStorage.getItem("newValue");
let defaultOrder = 'desc'
let defaultOrderColumn = 'id'
// If values are provided, use them as default
if (Order !== undefined) {
defaultOrder = Order;
}
if (OrderColumn !== undefined) {
defaultOrderColumn = OrderColumn;
}
defaultOrder = Order;
defaultOrderColumn = OrderColumn;
var webapi_server = { // Define webapi_server object
data: [],
length: 0,
server: "webapi"
};
var datatable_WEBAPI_event = $("#id_datatable_WEBAPI_event").DataTable({
processing: true,
lengthChange: false,
serverSide: true,
ajax: {
url: newValue + '/api/message/list',
headers: {
'Authorization': 'Bearer ' + getToken
},
type: "POST",
contentType : 'application/json',
data: function(d) {
d.search = d.search.value;
d.sf = 'S06F11';
console.log("RES SF", d);
d.order_by = defaultOrder;
d.order_column = defaultOrderColumn;
console.log("d.order_by", d.order_by);
console.log("d.order_column", d.order_column);
return JSON.stringify(d)
}
},
destroy: true,
columns: [
{ data: "sf", title: "sf" },
{ data: "code", title: "code" },
{ data: "subcode", title: "subcode" },
{ data: "msgtext", title: "msgtext" },
{ data: "description", title: "description_webapi_event" },
{
data: null,
title: "Alarm/Event Setting",
render: function (data, type, row) {
var switchId = 'customSwitch_' + row.id; // Assuming you have an 'id' field in your data
var switchHTML = '<div class="custom-control custom-switch">';
var isChecked = row.webapi ? 'checked' : ''; // 檢查 rowData.webapi 是否為 true,如果是,則添加 checked 屬性
switchHTML += '<input type="checkbox" class="custom-control-input" id="webapi_' + switchId + '" ' + isChecked + '>';
switchHTML += '<label class="custom-control-label" for="webapi_' + switchId + '">Selected</label>';
switchHTML += '</div>';
return switchHTML;
},
createdCell: function (td, cellData, rowData, row, col) {
var switchId = 'customSwitch_' + rowData.id; // Assuming you have an 'id' field in your data
var switchElement = $(td).find('#webapi_' + switchId);
// console.log("WEBAPI Element: ", switchElement);
var isChecked = rowData.webapi ? 'checked' : ''; // 根據 rowData.webapi 設置 isChecked 變數
switchElement.change(function () {
console.log("WEBAPI switchId: ", switchId);
console.log("WEBAPI isChecked: ", $(this).prop('checked'));
console.log("getData 新增這個輸出: ", getData); // 新增這個輸出
console.log("WEBAPI switchElement: ", switchElement);
if ($(this).is(':checked')) {
console.log(":checked 觸發前", rowData);
rowData.webapi = true;
rowData.isChanged = true;
console.log(":checked 觸發後", rowData);
saved_json_rowData.push(Object.assign({}, rowData)); // 將rowData的複本加入saved_json_rowData陣列
} else {
console.log(":checked 有觸發 ");
rowData.webapi = false;
rowData.isChanged = true;
saved_json_rowData.push(Object.assign({}, rowData)); // 將rowData的複本加入saved_json_rowData陣列
}
var selectedRows = datatable_WEBAPI_event.rows({ selected: true }).data();
console.log("Selected Rows >>>>>", selectedRows);
webapi_server.data = selectedRows.map(function (row) {
return { id: row.id, enable: row.webapi };
});
webapi_server.length = webapi_server.data.length;
webapi_server.server = "webapi";
console.log("Selected Rows:", webapi_server);
// var changedData = saved_json_rowData.filter(item => item.isChanged == true);
var changedData = saved_json_rowData.filter(item => item.isChanged === true);
console.log("saved_json_rowData: ", saved_json_rowData);
// console.log("rowData: ", rowData);
console.log("Changed Data:", changedData);
// 將 changedData 轉換成所需的格式
var changedData_to_jsonAPI_webapi_0 = changedData.map(item => ({
id: item.id,
enable: item.webapi
}));
console.log("changedData_to_jsonAPI_webapi_0", changedData_to_jsonAPI_webapi_0);
// 將轉換後的數據添加到目標物件中
changedData_to_jsonAPI_webapi = {
draw: 1,
length: changedData_to_jsonAPI_webapi_0.length,
server: "webapi",
data: changedData_to_jsonAPI_webapi_0
};
console.log("changedData_to_jsonAPI_webapi:", changedData_to_jsonAPI_webapi);
});
}
},
],
initComplete: function (settings, json) {
getData = json.data.filter(obj => obj.sf === 'S06F11').map(obj => {
let result = { ...obj }; // 使用物件展開運算子來深層複製物件
result['isChanged'] = false; // 給予變數
return result;
});
}
});
// Initialize the tabs in the WEBAPI modal
$('#webapiTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// 在每次表格重新繪製後觸發的事件
datatable_WEBAPI_event.on('draw.dt', function () {
// 監聽排序事件
datatable_WEBAPI_event.on('order.dt', function () {
var orderColumnIndex = datatable_WEBAPI_event.order()[0][0];
var orderDirection = datatable_WEBAPI_event.order()[0][1];
var orderColumnName = $(datatable_WEBAPI_event.column(orderColumnIndex).header()).text();
console.log("啟動排序 - 欄位: " + orderColumnName + ", 方向: " + (orderDirection === 'asc' ? '升序' : '降序'));
OrderColumn = orderColumnName;
Order = (orderDirection === 'asc') ? 'asc' : 'desc';
// 根據排序設定重新讀取資料
defaultOrder = Order; // 更新預設排序值
defaultOrderColumn = OrderColumn; // 更新預設排序欄位名稱
datatable_WEBAPI_event.ajax.reload();
console.log("新table Order", Order)
console.log("新table OrderColumn", OrderColumn)
});
});
}