// Initializing the table
let table = $(tableId).DataTable({
  order: [[4, "desc"]],
  language: {
    emptyTable: "No data available",
  },
  drawCallback: function () {
    setCounts();
  },
});

let currentPageCount = 0;
$(tableId).on("page.dt", function (e) {
  let pageInfo = table.page.info();
  currentPageCount = pageInfo.end;

  // Enable click event for next button
  if (pageInfo.end === countPerPage) {
    setTimeout(function () {
      $(".paginate_button.next").removeClass("disabled");
    }, 500);
  } else {
    $(".paginate_button.next").addClass("disabled");
  }

  // Enable click event for previous button
  if (pageInfo.end === 10) {
    setTimeout(function () {
      $(".paginate_button.previous").removeClass("disabled");
    }, 500);
  } else {
    $(".paginate_button.previous").addClass("disabled");
  }
});

// Draw table callback
function setCounts() {
  // Onclick Next button
  $(".paginate_button.next").on("click", function () {
    if (currentPageCount === 300) {
      onTableFirstLoad = false;
      currentPageCount = 10;
      callingAPI(arg1, arg2);
    }
  });

  // Onclick Previous button
  $(".paginate_button.previous").on("click", function () {
    if (currentPageCount === 10) {
      callingAPI(arg1, arg2);
    }
  });
}

// AJAX call
function callingAPI(param1, param2) {
  $.ajax({
    type: "POST",
    ...,
    ...,
    ...,
    success: function (data) {
      renderTable(data);
    },
  });
}

// Rendering the table
function renderTable(data) {
  table.clear().draw();

  data.map((d) => {
    table.row.add([d.data1, d.data2, d.data3, d.data4]).draw(false);
  });
}