在數據管理和操作中,表格是一種非常常見的工具,而jQuery Datatable是一個流行的開源插件,用于在網頁中創建高度可定制的表格。其中一個很有用的功能是行號,在許多情況下我們需要為表格的每一行添加一個編號。
通過Datatable插件,我們可以輕松地為每一行添加編號。下面是實現方法:
$('table').DataTable({ "columnDefs": [{ "orderable": false, "targets": 0 }], "order": [[1, 'asc']], "rowId": function(data) { return data.id; }, "columns": [{ "title": "序號", "data": null, "width": "10%", "render": function(data, type, row, index) { return (index.row + 1); } }, { "title": "姓名", "data": "name" }] });
在這個代碼示例中,我們在Datatable初始化中添加一個列定義(columnDefs),用于禁止表格首列作為排序列,并設置第二列為默認排序列。我們還定義了每行的行ID(rowId),返回每行的ID,以便Datatable可以自動識別并操作行。最重要的是,在列定義中,我們定義了一個"render"函數,該函數返回行號,即使表格重新排序,行號也不會被影響。通過這個方法,我們可以很容易地為Datatable表格添加行號。