3

mrt add datatablesMeteorで（経由で）DataTablesを使用しようとしています。$('#mytableid').dataTable()をMeteor.subscribeコールバックに追加しようとさまざまに試みましたが、、、Meteor.autorunおよびMeteor.startup-Template.mytemplate.renderedすべて、次の例外とNo data available in tableメッセージが発生しました。

ポインタはありますか？

    Exception from Meteor._atFlush: TypeError: Cannot call method 'insertBefore' of null
        at http://localhost:3000/packages/liverange/liverange.js?bc1d62454d1fefbec95201344b27a7a5a7356293:405:27
        at LiveRange.operate (http://localhost:3000/packages/liverange/liverange.js?bc1d62454d1fefbec95201344b27a7a5a7356293:459:11)
        at LiveRange.replaceContents (http://localhost:3000/packages/liverange/liverange.js?bc1d62454d1fefbec95201344b27a7a5a7356293:403:17)
        at http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:996:37
        at withEventGuard (http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:105:16)
        at http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:981:9
        at http://localhost:3000/packages/deps/deps-utils.js?f3fceedcb1921afe2b17e4dbd9d4c007f409eebb:106:13
        at http://localhost:3000/packages/deps/deps.js?1df0a05d3ec8fd21f591cfc485e7b03d2e2b6a01:71:15
        at Array.forEach (native)
        at Function._.each._.forEach (http://localhost:3000/packages/underscore/underscore.js?47479149fe12fc56685a9de90c5a9903390cb451:79:11)

更新：この問題に関連している可能性があります。この問題の最善の解決策は、各行に対してdataTable（）を呼び出すことでした。その場合は理想的ではなく、行数が非常に多いため、私の場合は壊滅的である可能性があります。

4

4 に答える 4

4

Drorの答えは確かに正しいスタートです。これが私が現在見ているベストプラクティスです：

HTML

<template name="data_table">
    {{#constant}}
        <table class="table table-striped" id="tblData">
        </table>
    {{/constant}}
</template>

JS：

Template.data_table.created = function() {
    var _watch = Collection.find({});
    var handle = _watch.observe({
        addedAt: function (doc, atIndex, beforeId) {
            $('#tblData').is(":visible") && $('#tblData').dataTable().fnAddData(doc);
        }
        , changedAt: function(newDoc, oldDoc, atIndex) {
            $('#tblData').is(":visible") && $('#tblData').dataTable().fnUpdate(newDoc, atIndex);
        }
        , removedAt: function(oldDoc, atIndex) {
            $('#tblData').is(":visible") && $('#tblData').dataTable().fnRemove(atIndex);
        }
    });
};

Template.data_table.rendered = function () {

    if (!($("#tblData").hasClass("dataTable"))) {
        $('#tblStudents').dataTable({
            "aaSorting": []
            , "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
            , "sPaginationType": "bootstrap"
            , "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            }
            , "aoColumns": [
                { "sTitle": "First Data", "mData": function (data) { return data.firstData },
            ]
        });

        $('#tblData').dataTable().fnClearTable();
        $('#tblData').dataTable().fnAddData(Collection.find().fetch());
    }
};
于 2013-03-01T20:03:10.330 に答える
3

Meteorはリアクティブであるため、最初に空のテーブルを作成してから、行を追加する必要があります。

テーブルを作成します。

$('#myTable').dataTable( {
    "aoColumns": cols, //the column titles
    "sDom": gridDom
} );

行の追加は次のようになります。

 var myCursor = myCollection.find({});
 var handle = myCursor.observe({
  added: function (row) {
   //Add in here the data to the table
  },

}）;

于 2013-02-28T00:12:15.973 に答える
3

答えられたアプローチはまだ有効ですが、2年後にいくつかの変更が必要です。

  1. もう一定のようなものはありません。
  2. 空のテーブルの代わりに、tbodyではなくtheadを配置します。このようにして、列が適切に定義されます。
  3. オブザーバーをonRendered（もうレンダリングされていない）に配置し、onCreated（もう作成されていない）には配置しません。それ以外の場合、テーブルは最初の作成時にのみ入力され、戻ってきたときには入力されません。
  4. onRenderedのclearメソッドとfillメソッドは必要ありません。
  5. observeメソッドでは、オブジェクトではなく配列を追加していることを確認してください。そうしないと、fnAddはコンテンツをレンダリングできません
  6. fnRemoveはもうありません。代わりにfnDeleteRowを使用してください
  7. 「見えるチェック」が必要かどうかわかりません。取り外しても問題ないようですので、取り外しました。

上記のコメントで、ここにコードがあります：

Template.creamDealsList.onRendered(function () {
   if (!($("#tblData").hasClass("dataTable"))) {
      $('#tblStudents').dataTable({
        // Those configuration are not really important, use it as they are convenient to you
        "aaSorting": []
        , "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
        , "sPaginationType": "bootstrap"
        , "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
        , "aoColumns": [
            { "sTitle": "First Data", "mData": function (data) { return data.firstData },
        ]
    });
   }
  var _watch = Collection.find({});
  var convertDocToArray = function (doc) {return [doc._id, doc.name]}
  var handle = _watch.observe({
    addedAt: function (doc, atIndex, beforeId) {
        $('#tblData').dataTable().fnAddData(convertDocToArray(doc));
    }
    , changedAt: function(newDoc, oldDoc, atIndex) {
        $('#tblData').dataTable().fnUpdate(convertDocToArray(newDoc), atIndex);
    }
    , removedAt: function(oldDoc, atIndex) {
        $('#tblData').dataTable().fnDeleteRow(atIndex);
    }
  });
})

そして、単純なHTMLは次のようになります。

<template name="data_table">
    <table class="table table-striped" id="tblData">
        <thead>
            <th>Id</th>
            <th>Name</th>
        </thead>
    </table>
</template>

これは少なくとも私にとってはうまくいきました。フラッシュエラーはもう表示されません。また、後でレンダリングすると、データテーブルに利用可能なデータがないというメッセージが表示され、それも消えてしまうことがありました。

于 2015-12-09T10:26:21.800 に答える
0

これが、CoffeeScriptとHTMLを使用したMeteorでのdataTablesの実装です。それは機能し、より単純ですが、大きなテーブルに対する既存の回答よりも効率が悪い可能性があります（私の場合は速いですが）。

テンプレート機能

Template.dashboard.rendered = ->

  # Tear down and rebuild datatable
  $('table:first').dataTable
    "sPaginationType": "full_numbers"
    "bDestroy": true

HTML

<template name="dashboard">
  <table class="table table-bordered" id="datatable_3" style="min-width:1020px">
    <thead>
      <!-- code removed to save space -->
    </thead>
    <tbody id="previous-jobs-list">
      {{#each jobs}}
        {{> jobRow}}
      {{/each}}
    </tbody>
  </table>
</template>

<template name="jobRow">
  <tr>
    <td><a href="/jobs/{{number}}">{{number}}</a></td>
    <td>{{normalTime date}}</td>
    <!-- more code removed to save space -->
  </tr>
</template>

ここで、dashboard.jobsは、コレクション上の単純な.find（...）です。

于 2013-05-26T22:47:14.310 に答える