iT邦幫忙

0

已刪文10

不明 2023-08-07 09:52:23543 瀏覽
  • 分享至 

  • xImage

已刪文

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
初新者小弟
iT邦新手 4 級 ‧ 2023-08-07 15:15:50

算自己回答自己了

修改成,在資料剛進來時,先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');
  });

}

我要發表回答

立即登入回答