进行筛选搜索后数据表信息丢失

Question

我的数据表有问题，每当我在表中使用搜索功能时，当我在搜索栏上输入任何内容时，所有数据都会丢失，我使用 AJAX 动态创建此数据表，首先我请求服务器获取我的表的数据。

function traerBecas() {
var ciclo = document.getElementById("ciclo").value;
$.ajax({
    url: '/becas/listaBecas',
    type: 'GET',
    data: {
        "ciclo": ciclo,
    },
    dataType: 'JSON',
    success:function(response){
        llenarTabla(response);
    }
  });
}

收到 JSON 格式的响应后，我将信息传递给另一个函数以构建每个表行并将其插入到表中。

function llenarTabla(jsonArray) {
var tabla = document.getElementById('becaBody');
tabla.innerHTML = "";

jsonArray.forEach(element => {
    var trElement = document.createElement('tr');
    var tdCLVBECA = document.createElement('td');
    var tdINSTIT = document.createElement('td');
    var tdCICLO= document.createElement('td');
    var tdSECCION = document.createElement('td');
    var tdFECINI = document.createElement('td');
    var tdFECFIN = document.createElement('td');
    var tdACCIONES = document.createElement('td');
    var linkEditar = document.createElement('a');
    var linkEliminar = document.createElement('a');

    tdCLVBECA.innerText = element.CLV_BECA;
    tdINSTIT.innerText = element.INSTIT.toUpperCase();
    tdCICLO.innerText = element.CICLO;
    tdSECCION.innerText = element.SECCION;
    tdFECINI.innerText = element.FEC_INI;
    tdFECFIN.innerText = element.FEC_FIN;
    

    linkEditar.setAttribute("href","/becas/editar/"+element.CLV_BECA);
    linkEditar.setAttribute("data-bs-toggle", "tooltip");
    linkEditar.setAttribute("data-bs-placement", "top");
    linkEditar.setAttribute("title", "Eliminar");
    linkEditar.innerHTML = "<i class='fas fa-pen'></i>";

    
    linkEliminar.setAttribute("onclick", "eliminacion("+element.CLV_BECA+")");
    linkEliminar.setAttribute("data-bs-toggle", "tooltip");
    linkEliminar.setAttribute("data-bs-placement", "top");
    linkEliminar.setAttribute("title", "Editar");
    linkEliminar.innerHTML = "&nbsp;<i class='fas fa-trash'></i>";

    tdACCIONES.appendChild(linkEditar);
    tdACCIONES.appendChild(linkEliminar);
    trElement.appendChild(tdCLVBECA);
    trElement.appendChild(tdINSTIT);
    trElement.appendChild(tdCICLO);
    trElement.appendChild(tdSECCION);
    trElement.appendChild(tdFECINI);
    trElement.appendChild(tdFECFIN);
    trElement.appendChild(tdACCIONES);
    tabla.appendChild(trElement);
    
});

}

然后我有将我的表转换为数据表的功能，到这一刻，一切正常。编辑：忘记提及此信息在加载页面时首先运行，开头的表格是空的，然后填充了我请求的信息。

$(document).ready(function() {
    $('#myTable').DataTable({
    responsive: true,
    language: {
        url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json'
    }
    });
});

然后，一旦我建好了表，我就尝试使用它生成的搜索功能，但后来我遇到了表找不到信息、丢失数据并且不返回到以前状态的问题一旦我删除了搜索栏上的提示。

我不知所措，我有其他没有这个问题的数据表，但是，这些表不是使用 AJAX 构建的，它们直接从控制器中使用 compact() 函数获取信息PHP 控制器，并使用像 @foreach 循环这样的 Blade 指令。

Answer 1

您应该打开浏览器的开发工具并检查对端点的网络请求：

url: '/becas/listaBecas'

可能有很多原因，网络选项卡会显示 AJAX 请求是否有错误。如果 AJAX 请求没有错误，您将需要查看您的端点并调试正在运行的查询以查看它没有返回任何结果的原因。

为 AJAX 调用添加错误捕获也是一个好主意：

  error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert("There was an error with the request");
  }