如何使数据表工作？

Question

是的。当谈到 jquery 时，我的耳朵还很嫩。我试图远离它，但它似乎是这类工作所需要的。虽然有人说你真的不需要。

现在，我从 Editor - dataTables 获得了扩展并将其实现到我的 HTML 中。我的问题是，加载时似乎无法在 html 上显示 table。是因为缺少 table 的值吗？还是我遗漏了什么，我应该在代码中定义才能使其工作？

<!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>

Answer 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。改为更改参数以适用于您的系统。 :-)

如何使数据表工作？

How to make dataTable work?

html

javascript

css

datatable

jquery