DataTable Sortierbar mit dynamischer Datenquelle

Question

Ich habe eine Tabelle mit Ereignissen zwischen 'Time1' und 'Time2'.

Wenn Sie auf 'Load' klicken, werden die Daten durch eine Ajax-Funktion mit einigen Parametern geladen.

Jetzt möchte ich eine sortierbare Tabelle verwenden ... DataTable

Die Tabelle korrekt initialisiert werden. Aber wenn ich die Zeilen mit

$('table').append('<tr><td> ' + row.id + '</td><td>' + row.name + '</td></tr>'); 

hinzufügen kann ich die Tabelle nicht sortieren.

Wie kann ich es mit Ajax realisieren, um die Tabelle sortierbar zu machen? Ich weiß nicht, wie die DataTable Manual bedeutet es

<table class="table table-bordered" id="report-table" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
    <tbody id="report"> 
    </tbody> 
</table> 

Und das Javascript:

$(document).ready(function() { 
    var dataset = null; 

    $('#report-table').dataTable({ 
     data: dataset, 
     columns: [ 
      { title: 'ID' }, 
      { title: 'Name' } 
     ] 
    }); 

    $('#btn-load, .btn-filter-apply').on('click', function() { 
     $('#filter').modal('hide');  

     var data = new Array(); 
     $('.filter-list tr').each(function(idx, row) { 
      data.push([$(row).find('td').eq(0).text(), $(row).find('td').eq(1).text(), $(row).find('td').eq(2).text()]); 
     }); 

     $.post('/data', { from: $('#ipDateTimeFrom').val(), till: $('#ipDateTimeTo').val(), data: data, ip: $('#sb-server option:selected').val() }, function(resp) { 
      $('#report').html(''); 
      dataset = resp.data; 
      $.each(resp.data, function(idx, row) { 
       $('#report').append('<tr style="background-color:#ffffff"><td>' + row.ID + '</td><td>' + row.Name + '</td></tr>'); 
      });  
     }); 
    }); 
}); 

Answer 1

Siehe dataTable.row.add() und dataTable.order() - Sie sollten nicht AJAX müssen die Datatable neu zu ordnen. EDIT Bitte beachten Sie, das erfordert, dass Sie die richtige dataTable Konvention des Hinzufügens von Daten Schlepptau der Tabelle mit dem dataTable.row.add() Verfahren folgen, also einschließlich der im Code:

$(document).ready(function() { 
    var dataset = null; 

    // Table represented as var table. 
    var table = $('#report-table').DataTable({ 
    data: dataset, 
    columns: [{ 
     title: 'ID' 
    }, { 
     title: 'Name' 
    }] 
    }); 

    var rowData = [ "id", "title" ]; 

    // Add an array of row data, e.g., [ "id", "title" ], have to redraw 
    // when we modify table. 
    table.row.add(rowData).draw(false); 

    $('#btn-load, .btn-filter-apply').on('click', function() { 
    $('#filter').modal('hide'); 

    var data = new Array(); 
    $('.filter-list tr').each(function(idx, row) { 
     data.push([$(row).find('td').eq(0).text(), $(row).find('td').eq(1).text(), $(row).find('td').eq(2).text()]); 
    }); 

    // Order based on index - maybe you can use your mysterious 
    # $("filter-list tr") query above to order more dynamically 
    table.order([1, 'asc'], [2, 'asc']).draw(); 
    }); 
}); 

Beachten Sie auch, dass Sie Daten aus einer AJAX-Quelle beziehen können die initializer wie folgt, wenn Sie es wünschen:

$('#report-table').dataTable({ 
    "ajax": "data.json" 
}); 

EDIT: JSFiddle.