iT邦幫忙

0

已刪文

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

1 個回答

0

有更新了,要像這樣

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)
  });
});
}

我要發表回答

立即登入回答