у меня проблема в ajax Пост не отображать данные

Question

у меня есть таблица с полями поиска, разделенными на 1- заголовок таблицы содержит «поля поиска - заголовки таблицы» 2- тело таблицы => исходить из ajax метод post 3- pagination => исходить из ajax метод post после данных извиняемый "я использовал setTimeout для задержки этой функции"

данные автоматически отображаются в теле таблицы после ajax post & если пользователь использует поиск в полях также данные, отфильтрованные по поисковым словам и разбивке на страницы, также отображаются на основе данных

у меня есть 2 случая 1- на главной странице таблица, загруженная страница и все работает нормально, я использовал следующую функцию: следующую функцию, отвечающую за данные

    jsQueryDataLive(defaultPageNo);
  function jsQueryDataLive(defaultPageNo){
  var objData = {
    action     : dataTableName +'/QueryData',
    ajaxClass  : actionSplit0,
    ajaxPage   : defaultPageNo,
  };
  $('#form-query-main').find(":input").each(function(){
    objData[this.name] = $(this).val();
  });
  // console.log(objData);
  // NOTE: the below line is Responsible for determining the location we need to view data on
  var locationID = '#main-table-tbody';
  ajaxPost(objData, locationID);
}

следующую функцию для нумерации страниц

    jsPaginationLive(defaultPageNo);
  function jsPaginationLive(defaultPageNo){
  setTimeout(function () {
    var objData = {
      action     : dataTableName +'/Pagination',
      ajaxClass  : actionSplit0,
      ajaxPage   : defaultPageNo,
    };
    // document.getElementById("jsData").innerHTML =JSON.stringify(objData);

    // NOTE: the below line is Responsible for determining the location we need to view data on
    var locationID = '#pagination';
    ajaxPost(objData, locationID);

  }, 100);
}

я использовал следующую функцию для фильтра

   $('.searchField').keyup(function() {
   jsPageNo(defaultPageNo);

  } );


 function jsPageNo(defaultPageNo) {
 jsQueryDataLive(defaultPageNo);
 jsPaginationLive(defaultPageNo);

}

2 - второй случай, когда я хочу отобразить указанную выше шкалу в модальном

как вы видите на странице отображение таблицы и данных c правильно, я использовал эту функцию, чтобы определить таблицу и загрузить основной пакет:

    var dataTableName;
jsDataTableName();
function jsDataTableName(tableName) {

  if (tableName === undefined) {
    dataTableName = actionSplit0;
    // console.log(dataTableName);

  }
  else {
    dataTableName = tableName;
    console.log(dataTableName);

    // NOTE: load External Class Query page
    jsLoadExternalClass();

  }
}

    function jsLoadExternalClass(){
  var objData = {
    action     : dataTableName +'/Query',
    ajaxClass  : actionSplit0,
    ajaxPage   : defaultPageNo,
  };

  // document.getElementById("jsData").innerHTML =JSON.stringify(objData);
  // jsPaginationLive(defaultPageNo);

  // NOTE: the below line is Responsible for determining the location we need to view data on
  var locationID = '#externalClass1';
  ajaxPost(objData, locationID);
  jsPageNo(defaultPageNo);
}

проблема со мной в фильтре не работает, когда я печатаю сразу, но она работает после того, как я закрываю модальное и снова открываю его введите описание изображения здесь

также, если есть лучшее решение для запуска функции jsPaginationLive после завершения jsQueryDataLive вместо setTimeout, пожалуйста, сообщите мне

Answer 1

Если вы установите таймер на setTimeout от 100 мс до 2000, это все еще имеет проблему? Одна из проблем, с которой я столкнулся при использовании тайм-аутов для обработки подобных ситуаций, заключается в том, что любое отклонение во времени загрузки сайта (которое всегда может варьироваться по разным причинам) может привести к тому, что тайм-аут не достигнет вашей цели.

Поэтому вместо этого я бы предложил следующее: либо добавьте переменную, которая устанавливается функцией данных после завершения, либо вы можете использовать значение в функции данных, которое не должно быть неопределенным перед продолжением, тогда используйте функцию разбиения на страницы в setInterval, например:

var interval;
interval = setInterval(function(){
 if (dataHasLoaded){ // This will be whatever the you decide to name the variable
   jsPaginationLive(defaultPageNo);
   clearInterval(interval);
  }
},500);

Это гарантирует, что функция разбивки на страницы никогда не будет пытаться загрузить, пока данные не будут полностью загружены.

РЕДАКТИРОВАТЬ: В качестве альтернативы, вы можете поместить " jsPaginationLive (defaultPageNo);» где-то в конце "jsQueryDataLive (defaultPageNo);" поэтому он не будет пытаться разбивать на страницы до тех пор, пока не завершится функция данных.

Ответ на второй вопрос:

Если вы хотите, чтобы интервал запускался только тогда, когда пользователь печатает, вы можете сделать что-то вроде это:

  var interval;
  window.onkeydown = function(){
    clearInterval(interval);
    interval = setInterval(function(){
      if (dataHasLoaded){
         jsPaginationLive(defaultPageNo);
         clearInterval(interval);
        }
     },500);
  }

    var keyTimeout;
    window.onkeyup = function(){
    clearTimeout(keyTimeout);
        keyTimeout = setTimeout(function(){
           clearInterval(interval);
        }, 5000); // The interval will be cleared 5 seconds after the last keypress. Change as needed.
    }

Мне кажется, что есть более чистый способ сделать это. Почему вы хотите, чтобы интервал был активен только во время ввода?