算自己回答自己了
修改成,在資料剛進來時,先filter
別 draw.table 完才filter,不然table 的 頁數跟資料總數 會跟初始資料一樣
dataSrc 跟 data 是一樣的邏輯,盡量別一起用
像醬
data: function(d) {
d.search = d.search.value
d.sf = 'S06F11'
console.log("RES SF", d)
return JSON.stringify(d)
},
完整修改如下
function modalTable_WEBAPI_event() {
const getToken = localStorage.getItem("token");
var getData;
var rowData;
var currentPage = 1;
var saved_json_rowData = [];
newValue = localStorage.getItem("newValue");
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)
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_webapi</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');
});
}