【问题标题】:jQuery datatable functionality inoperablejQuery 数据表功能无法运行
【发布时间】:2017-08-10 17:59:32
【问题描述】:

我使用 Datatables 已经有一段时间了,但显然,我没有以正确的方式使用它们。

过去,我会使用 $.post 来启动我的数据表,如下所示:

$(document).ready(function() {
  $.post('process/recordTables.php', function(data)
  {
    var table = $('#example1').DataTables();
    table.clear();
    var obj = JSON.parse(data);
    obj.forEach(function(item)
    {
      table.row.add([item.column1, item.column2, //and so on]);
    });
    table.draw();
  });
});

上面的代码有效。我的数据表打印我需要的数据。在 obj.forEach 中,我可以根据需要设置带有 href 标记和其他功能的列。

但是,如果我希望能够在设定的时间间隔内重新加载数据表,则不能使用上述方法。它必须使用“ajax”方法。

经过几次试验和错误,使用下面的代码,我能够打印出 jQuery 数据表的“正确”形式(和使用):

$(document).ready(function() 
{
  $('#example1').DataTable({
    "processing": true,
    "serverSide": true, 
    "ajax": {
      "url": "process/recordTables.php", // same url as the above code
      "type": "POST",
      "dataSrc": ''
    },
    "columns": [
      { "data": "" },
      { "data": "column1" },
      { "data": "column2" },
      { "data": "column3" },
      // and so on
    ],
    "iDisplayLength": 25,
    "order": [[ 3, "desc" ]],
    "scrollY": 550,
    "scrollX": true,
    "bDestroy": true,
    "stateSave": true,  
     // few others that don't seem to affect functionality
  });
});

使用上面的代码,我能够使用 $.post 方法显示相同的数据。

但是...这些功能都不起作用。排序不起作用。分页,搜索过滤器,表格底部的数据信息显示“0 out of 0 entries”。没有任何效果。

我缺少什么可以解决这个问题?我很困惑。

编辑

这是 HTML 表格:

<table id="example1" class="table table-bordered table-hover table-condensed">
<thead>
  <tr>
    <th></th>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    // and so on
  </tr>
</thead>
<tbody>
</tbody>
</table>

【问题讨论】:

  • 你能发布与这个DataTable相关的HTML吗?并且具有值为“ ”的属性 dataSrc 将不显示任何数据。完全删除该属性。
  • 你的 HTML 没问题,只要 th 计数与 dataTable 定义中的列匹配,就不需要触摸它。
  • 尝试删除空的dataSrc。我在一个工作数据表上进行了测试,当属性为空时它会删除所有数据。除此之外,您的 dataTable 代码看起来不错。
  • 一个小问题:开发控制台上显示任何错误?
  • 这是因为你有"serverSide": true ...如果设置了所有排序,过滤等,预计将在服务器端执行。

标签: javascript jquery ajax datatables


【解决方案1】:

当您添加"serverSide": true 属性时,您将DataTable 设置为server-side processing。在这种情况下,所有客户端处理都被禁用:

启用服务器端处理后,DataTables 执行的所有分页、搜索、排序操作都将移交给服务器

【讨论】:

  • @davidkonrad 我犯了一个错误并复制了错误的属性...快照。现已更正。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-08-26
  • 1970-01-01
  • 1970-01-01
  • 2013-11-02
  • 2015-07-13
  • 2020-01-08
  • 2013-03-17
相关资源
最近更新 更多