ブートストラップ内のデータテーブルのソートが動的データで動作しない

Question

指示されたとおりにデータテーブルを実装しましたhere。

$(document).ready(function() { 
    $('#example').DataTable(); 
}); 

このようにテーブルを初期化しますが、データはAJAXを使用してオンザフライでロードされます。私がクリックしたときに、テーブルを移入するためのボタンがあります。

test.phpをのための

$.ajax({ 
    type: 'POST', 
    url: 'phpfunc/test.php', 
    data: {sDate: sDate, eDate: eDate}, 
    cache: false, 
    success: function(result) { 
     if(result){ 
      $('#example2 tbody').html(result); 
     }else{ 
     alert(result); 
     alert("error"); 

     } 
    } 
}); 

、コンテンツがこのようなものです：

echo '<tr>'; 
echo '<td>'; 
echo 'Sample Data'; 
echo '</td>'; 
echo '<td>'; 
echo 'Sample Data'; 
echo '</td>'; 
echo '<td>'; 
echo 'Sample Data'; 
echo '</td>'; 
echo '</tr>'; 
echo '<tr>'; 
echo '<td>'; 
echo 'Sample Data'; 
echo '</td>'; 
echo '<td>'; 
echo 'Sample Data'; 
echo '</td>'; 
echo '<td>'; 
echo 'Sample Data'; 
echo '</td>'; 
echo '</tr>'; 

それは表に移入が、私の問題は、私がクリックしたときにということです列のソート（降順または昇順）、テーブルの内容はクリアされます。ブートストラップのデータテーブルは本当にこのように動作するのですか、ここで何か不足していますか？

Answer 1

PHPで行うには、その何も...

たぶん、あなたはすべてのAJAX呼び出し後に再結合し、あなたの.DataSet()プラグインする必要があります。

success: function(result) { 
    if(result){ 
     $table = $('#example'); 
     $table.find('tbody').html(result); 
     $table.DataTable(); //Rebind 
    }else{ 
    alert(result); 
    alert("error"); 

    } 
} 

が、私は特にこのプラグインを知らないが、それらのいくつかは同様に、再バインドまたはネイティブデータハンドリングを提供します：

$('#example').DataTable('refresh'); 

しかし、あなたはドキュメントでそれを検索する必要があります。例えば あなた自身。したがって

Answer 2

DataTables APIではなく、DOMメソッドを使用してテーブルにデータを追加しています。リスナーはテーブルDOMにありません。そのため、DataTablesは新しい行がこの方法で挿入されたときを自動的に認識しないため、新しいデータについて何も知りません。

データを「ソート」すると、データがクリアされるのはなぜですか。データ型ソート機能はDOM要素ではなく、APIを介して実行されます。ここ

詳細情報：応答のための https://datatables.net/examples/data_sources/ajax.html