Clicking on other pages redirects to the first page. How can I correct this?

freshcoder00300

After researching, I found out that the fine-tuned code below could fix my problem(my other html was fixed by this)

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

I did the same thing this time, but it didn’t work. Issue: Clicking on the data on other pages redirects to the first page

• Here is the code and failed demo video

function modalTable_WEBAPI_alarm() {
  const getToken = localStorage.getItem("token");
  var getData;
  var currentPage = 1;

  var datatable_WEBAPI_alarm = $("#id_datatable_WEBAPI_alarm").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; // Assign a variable
          return result;
        });

        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_alarm" },
      {
        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' : ''; // Check if rowData.webapi is true, if so, add the checked attribute
          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' : ''; // Set the isChecked variable based on rowData.webapi
          switchElement.change(function () {
            datatable_WEBAPI_alarm.draw();
          });
        },
      ],
    },
  });

  // Initialize the tabs in the WEBAPI modal
  $('#webapiTabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });

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

I have read through datatables manual, studied about it, but I do need some help, thanks.

colin

Try changing the call to draw() from this:

datatable_WEBAPI_alarm.draw();

to this:

datatable_WEBAPI_alarm.draw('page');

That'll keep the paging position where it was,

Colin