通过javascript向datatable添加行

Question

我想在使用javascript数组显示页面时向数据表添加行.我试图解决这个问题,但行没有添加.任何帮助表示赞赏..

$('#dataTables-example').DataTable().fnAddData([
  '1', '1', '1'
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

您的代码工作正常,但仅适用于插件的1.9.x版(或更早版本).

$('#dataTables-example').DataTable().fnAddData([
  '1', '1', '1'
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

按照datatables.net网站上的示例获取最新版本(1.10.x):

$('#dataTables-example').DataTable().row.add([
  '1', '1', '1'
]).draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>