Добавить столбец номера строки в jQuery datatables

Я хочу, чтобы jQuery datatables автоматически создавал столбец номера строки в первом столбце, как datagrid в VB.

Это выглядит так:

enter image description here

кто-нибудь знает, как это сделать?

6
datatables html jquery

3 ответов

вы просто определяете пустой столбец в aoColumns.

затем в функции fnRowCallback вы просто редактируете столбец, как вам нравится. Этот обратный вызов выполняется каждый раз при создании новой строки.

в основном, если ваш первый столбец имеет номер строки, вы можете просто сделать это в fnRowCallback:

var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
10

просто написать функцию render:

{
    "data": "id",
    render: function (data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
    }
}
23

Как я прокомментировал, ответ @Pehmolelu и @Tao Wang не работал хорошо для меня. Я должен был пойти с тем, что советует столбец индекса DataTables:https://datatables.net/examples/api/counter_columns.html

обратите внимание, что в случае меня даже конфигурация столбца снижается через вызов API моего сервера webapp (и иногда у меня есть счетчики строк, иногда нет), перед этим столбцом счетчика есть 3 системных столбца, поэтому индекс столбца равен 3, но вы нужно настроить его в соответствии с вашими потребностями.

t.on('order.dt search.dt', function () {
    t.column(3, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    });
}).draw();

кроме того, если ваше решение не такое сложное, как мое, ссылка выше также показывает, как вы добавляете этот столбец несортируемым + неисследованным способом (снова вам нужно настроить индекс столбца для ваших нужд):

var t = $('#example').DataTable({
    "columnDefs": [{
        "searchable": false,
        "orderable": false,
        "targets": 3
    }],
    "order": [[4, 'asc']]
});

есть также плагин, который вы можете использовать вместо своего собственного кода.

2