2

ページング、フィルタリング、および ColVis プラグイン (列の可視性) を備えた DataTable があります。ボタンを押すことで、すべてのページの表示およびフィルタリングされたデータを取得し、このデータを使用して下に新しい通常のテーブルを生成する必要があります (これはデータテーブル、ページャーなどを含まないテーブルです)。

行を取得しようとしoTable.rows({search:'applied'}).data()ましたが、表示されている列のデータのみを取得する代わりに、非表示の列も取得します。とにかく、新しいテーブルを生成する方法がわかりません。

ここにデモがあります

どうすればこれを行うことができますか?

前もって感謝します

4

2 に答える 2

2

私の答えは、いくつかの変更を加えた@davidkonradの答えに基づいています:

$('button.print-bt').on('click', function() {               
    var fvData = oTable.rows({ search:'applied', page: 'all' }).data(); 

    $('#main_wrapper').append(
       '<table id="newTable">' +
       '<thead>'+
       '<tr>'+
          $.map(oTable.columns().visible(),
              function(colvisible, colindex){
                 return (colvisible) ? "<th>" + $(oTable.column(colindex).header()).html() + "</th>" : null;
           }).join("") +
       '</tr>'+
       '</thead>'+
       '<tbody>' +
          $.map(fvData, function(rowdata, rowindex){
             return "<tr>" + $.map(oTable.columns().visible(),
                function(colvisible, colindex){
                   return (colvisible) ? "<td>" + $('<div/>').text(rowdata[colindex]).html() + "</td>" : null;
                }).join("") + "</tr>";
          }).join("") +
       '</tbody></table>'
    );
});

私の答えは、データ ソースとしてオブジェクトを持つテーブルでは機能しない可能性があり、rowdata[colindex].

$('<div/>').text(data).html()データに存在する可能性のある HTML エンティティをエンコードするトリックを使用しています。

デモンストレーションについては、この JSFiddleを参照してください。

于 2015-05-08T13:43:44.193 に答える