Question

是。谈到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>

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。更改参数以使用您的系统。： - ）

如何使dataTable工作？

1 个答案: