web-dev-qa-db-ja.com

JavaScriptを介してデータテーブルに行を追加する

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>
javascriptjqueryhtmldatatablesjquery-datatables
8
Ashwin Tumma

コードは正常に動作しますが、 プラグインのバージョン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>

最新バージョン（1.10.x）の datatables.net Webサイト の例に従ってください。

$('#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>
12
Blazemonger

[〜＃〜] api [〜＃〜] から、これは行を追加する方法の1つです。

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

デモ@ フィドル

4
lshettyl

DataTablesを使用する場合の再初期化警告の課題に対処するには、取得オプションを試してください。 www.datatables.net/manual/tech-notesは、その仕組みを説明しています。 Retrievehereについて読むことができます。

上記のコード構造が常に魅力的であるとは限らないことを認めて、DataTablesを取得 [DT] オプションとして使用すると、初期化オプションは後で変更できないことをDataTablesに伝えることができます初期化し、それが発生した場合は、DataTableインスタンスを返すだけです。

このオプションのパラメーターは、DataTablesインスタンスを取得するときに、上記の$ .fn.dataTable.isDataTable（）を使用して明示的なチェックへのショートカットを提供できます。

table = $('#example').DataTable( {
retrieve: true,
paging: false } );
0
MEC