1.我是自己分，同個資料源根據id 分類成alarm event
2.我應該是有分好資料，不確定能不能達成"在切換的頁的時候 呼叫相對應的群組繪製"

揮揮手大神，我這邊是有比較全的code, 有把問題中原本省略掉的部分補上

function modalTable_WEBAPI_event() {
  const getToken = localStorage.getItem("token");
  var getData;

  var datatable_WEBAPI_event = $("#id_datatable_WEBAPI_event").DataTable({
    ajax: {
      url: "http://192.168.10.01:1000/api/message/all_item",   //fake api
      headers: {
        'Authorization': 'Bearer ' + getToken
      },
      dataSrc: function (response) {
        console.log("DATA MODAL TABLE", response.data);
        getData = response.data.map(obj => {
          let result = JSON.parse(JSON.stringify(obj))
          result['isChanged'] = false //給予變數
          return result
        })

        console.log('DATA CHANGe', getData)

        return getData;
      },
    },
    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; 
          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; 
          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: ", isChecked);
            console.log("WEBAPI switchElement: ", switchElement);
            if ($(this).is(':checked')) {
              rowData.webapi = true;
              rowData.isChanged = true;
            } else {
              rowData.webapi = false;
              rowData.isChanged = true;
            }
            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 = getData.filter(item => item.isChanged == true);
            console.log("Changed Data:", changedData);

            console.log("changedData webapi", 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);

            datatable_WEBAPI_event.draw();

                        setTimeout(function() {
              datatable_WEBAPI_event.ajax.reload(null, false);
                }, 30000); 
            });
          }
        },
      ]
    });

      // 初始化 tab 在 WEBAPI 
  $('#webapiTabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });

  // 過濾“sf”為“S06F11”的數據 (S06F11 = event代號)
  datatable_WEBAPI_event.column(0).search('S06F11').draw();

你要接著分
再來 每頁的比數 是由你設定的select 來處理
alarm : [[page1資料],[page2資料],[page3資料].....]
event : [[page1資料],[page2資料],[page3資料].....]

你確定你有分好資料
那你就直接用你分好資料的來畫table

我記得前幾個問題
你已經會用資料重繪表格這件事情了

我現在 已經有分成alarm跟 event table 了鴨
1.有辦法加類似這個直接解決嗎?

setTimeout(function() {
datatable_FTP.ajax.reload(null, false);
}, 30000);

2.還是需要重畫，分頁，才有效嗎(點其他頁資料不會跳回第一頁)?
(✿╹◡╹)

我猜的，對DataTable不熟

我的currentPage = 1; 是想試試看，把點的頁數存下來，就算reload了，也是在那頁

var currentPage = 1; // 儲存當前頁數

var datatable_FTP = $("#id_datatable_FTP").DataTable({
  // ... (省略) ...
});

// ... (省略) ...


datatable_FTP.column(0).search('S05F01').draw();
// 保留當前頁面並重新加載表格而不重置分頁

setTimeout(function() {
  currentPage = datatable_FTP.page(); 
// 希望點翻頁碼，能存下來

  datatable_FTP.ajax.reload(function(){
    datatable_FTP.page(currentPage).draw('page'); 
// reload 後設置回存儲的頁碼 
  }, false);
},3000);

但失敗了

阿你跳轉頁面後，整個頁面都會重設，變數都得重新初始化，當然會回到第一頁...

自己去查localStorage如何操作或是去查如何操作網址後面參數。

真的，感覺樓主就是有概念，卡在奇怪的點，最後解決了。
所以打算回答方向就好。

froce大神，可是上一題用類似的reload 可以捏? 「(°ヘ°)

setTimeout(function() {
datatable_FTP.ajax.reload(null, false);
}, 30000);