我在 ajax 中有问题 Post 不显示数据

Question

我有一个搜索字段分隔的表格 1- 表头包含“搜索字段 - 表头” 2- 表体 => 来自 ajax post 方法 3- 分页 => 数据执行后来自 ajax post 方法“我使用 setTimeout 来延迟此功能”

数据通过 ajax post 自动显示在表体中，如果用户使用搜索字段，搜索词过滤的数据和分页也会根据数据显示

我有两个案例 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- 第二种情况是我想在模态中显示上面的包

正如您在页面中看到的，表格和数据正确显示 我用这个函数来定义表并加载主包：

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

当我立即键入时过滤不工作的问题，但在我关闭模式并重新打开它后它工作 enter image description here

如果有更好的解决方案在 jsQueryDataLive 完成而不是 setTimeout 后启动函数 jsPaginationLive 请告诉我

Answer 1

如果您将 setTimeout 上的计时器从 100 毫秒设置为 2,000 毫秒，是否仍然存在问题？我在使用超时来处理此类情况时遇到的问题之一是，网站加载时间的任何差异（由于多种原因总是会发生变化）都可能导致您的超时无法实现您的目标。

所以我建议这样做：要么添加一个由数据函数在完成时设置的变量，或者您可以在数据函数中使用一个在继续之前不能未定义的值，然后在 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.
    }

不过，我觉得有一种更清洁的方法可以做到这一点。为什么你希望间隔只在打字时有效？