Question

我有一个表格，其中包含'Time1'和'Time2'之间的事件。

单击“加载”，数据将由ajax函数加载，带有一些参数。

现在我想使用可排序的表格... DataTable

表初始化正确。但是如果我用

添加行

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

我无法对表格进行排序。

如何通过Ajax实现它以使表可排序？我不知道DataTable Manual是什么意思

<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>

和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

请参阅dataTable.row.add()和dataTable.order() - 您不需要AJAX来重新排序dataTable。编辑请注意，这需要您遵循dataTable使用dataTable.row.add()方法在表格中添加数据的正确惯例，因此请在代码中包含该内容：

$(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();
  });
});

另请注意，如果您愿意，可以按如下方式从初始化程序中的AJAX源中获取数据：

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

编辑：JSFiddle。

DataTable可以使用动态数据源进行排序

1 个答案: