如何使数据表工作？答案

【问题标题】：How to make dataTable work?如何使数据表工作？
【发布时间】：2015-08-11 12:09:20
【问题描述】：

是的。当谈到 jquery 时，我耳后很绿。我试图远离它，但似乎这种类型的工作需要它。虽然有些人说你真的不必这样做。

现在，我从Editor - dataTables 获得了扩展并将其实现到我的 HTML 中。我的问题是，我似乎无法在加载时获得 html 上显示的表格。是因为表中缺少值吗？还是我错过了一些我应该在代码中定义以使其工作的东西？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webbased WinCos</title>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
    <link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.js"></script>
    <script type="text/javascript" src="js/dataTables.editor.js"></script>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>

    <script type="text/javascript">
      var editor = new $.fn.dataTable.Editor( {} );

      new $.fn.dataTable.Editor( {
      ajax:  '/api/staff',
      table: '#staff',
      fields: [
          { label: 'First name', name: 'first_name' },
          { label: 'Last name',  name: 'last_name'  },
          // etc
      ]
  } );

  $('#myTable').DataTable( {
      ajax: '/api/staff',
      dom:  'Tfrtip',
      columns: [
          { data: 'first_name' },
          { data: 'last_name' },
          // etc
      ],
      tableTools: {
          sRowSelect: 'os',
          aButtons: [
              { sExtends: 'editor_create', editor: editor },
              { sExtends: 'editor_edit',   editor: editor },
              { sExtends: 'editor_remove', editor: editor }
          ]
      }
  } );

    </script>

    <table id="myTable" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th width="18%">Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                </table>

  </body>
</html>

【问题讨论】：

我稍微清理了你的 JSFiddle：jsfiddle.net/jtoud32z/2 - 不要在左上窗格中包含整个 HTML 文件。左下窗格是所有脚本，包含的脚本（jquery、datatables、css 文件）包含在左侧的面板中。
谢谢。非常感谢！

标签： javascript jquery html css datatable

【解决方案1】：

如果您实际上在 /api/staff 路径上有服务，那么您的问题是您在 DOM 准备好之前初始化了数据表。您需要将 DOM 操作代码包装在

中

$(document).ready(function() {
    //code here
});

否则将无法正常工作。

对于您的示例，如果您使用最简单的 DataTables 调用变体，数据表似乎可以正常工作：

$(document).ready(function() {
    $('#myTable').DataTable({
        ajax: '/api/staff',
    });
});

这个例子可以在https://jsfiddle.net/jtoud32z/3/ 看到——当然，虽然它没有从/api/staff 服务返回结果。

当你有这个工作时，你可以将其他参数添加到.DataTable 调用中，例如columns。确保只一个一个地添加参数，这样您就可以了解它们各自的作用。在您的示例中，您直接从他们的站点的示例中复制了代码，并更改了 Ajax url。更改参数以改为使用您的系统。 :-)

【讨论】：

很棒的答案！我有一个api/staff 服务，由于我公司的防火墙，它也在连接但没有响应。但是，样式和按钮/等。工作得很好！谢谢你。 :-)