2

私はテンプレートを使用しています。これには、class="datatable" を持つすべてのテーブルが jQuery データテーブルに変換されるという優れた機能があります。

$(".datatable").dataTable();

ここで、さまざまな種類のデータをテーブルに入れてみましたが、金額とパーセンテージの列が数値ではなくテキストとして並べ替えられていることに気付きました。金額とパーセンテージでソートするためのプラグインを追加しました (こちらを参照) が、適用されていません。

ここで尋ねられたことと同様のことをしたいと思います。つまり、オーバーライドする必要があるいくつかの列の sType をタグで指定します。ただし、ID ではなくクラスを使用して関数を適用しているため、sType 属性をスキャンしてクラスの特定のインスタンスに基づいて検索する提案されたソリューションをどのように変更すればよいでしょうか?

$(".datatable").each(function() {
    var aoColumns = [];
    $(this).children("th").each(function() {
        var sType = $(this).getAttribute("data-sType");
        aoColumns.push(sType ? { "sType" : sType } : null);
    });
    //$(this).dataTable();
    $(this).dataTable(
            {
                "aoColumns" : aoColumns
            }
        );
});

Cannot read property 'asSorting' of undefinedこれで発生する問題は、aoColumns オプションを指定して実行すると継続的にエラーが発生することですが、オプションを指定せずに実行すると機能します (並べ替え機能を除く)。

4

1 に答える 1

1

問題の試みは次のとおりです。

http://jsbin.com/ewinep/1
「価格」列で並べ替えて、動作を確認します。

http://jsbin.com/ewinep/1/edit
問題の核心は、データテーブルを作成する以下の JavaScript にあります。

$(".some-table").each(function(i, v) {
    var aoColumns = []; 
    $(this).find("thead th").each(function() {
      var sType = $(this).data("stype"); // lowercase!
         aoColumns.push(sType ? { "sType" : sType } : null);
    });
   $(this).dataTable({ "aoColumns": aoColumns }); 
});

.datatable各テーブルのクラス名をに変更したことに注意してください.some-table(違いがあるわけではありません。同じ名前の css クラス名と javascript 関数を見るのにうんざりしています)。

余談ですが、ネストされた内部でコードが実行されているかどうか$(this).children("th").each(function() {
を確認するために、下で console.log() を実行しようとしましたか?.each

于 2013-06-25T04:42:10.573 に答える