JQuery DataTables中關於行號顯示的問題
阿新 • • 發佈:2018-12-25
DataTables是一個非常好用的表格外掛,關於它的行號顯示的方法可分為兩種,第一種是知道表頭,可以在columns中新增即可;第二種是不知道表頭,這時候就不能用第一種簡單的辦法啦。
- 方法 一
知道表頭,可以直接在columns中新增
$('#example').dataTable({ columns: [ //行號 { "data":null, render: function (data, type, row, meta) { return meta.settings._iDisplayStart + meta.row + 1; } }, //表頭 { ... }, { ... }
- 方法二
這種方法在DataTables官網中也有介紹,但是會出現顯示Object的情況,原來是缺少了draw.dt,它是DataTables的繪製事件,用來監聽繪製事件。把官網的例子修改一下就能正常顯示行號了。
$(document).ready(function() { var t = $('#example').DataTable( { "columnDefs": [ { "searchable": false, "orderable": false, "targets": 0 } ], "order": [[ 1, 'asc' ]] } ); t.on( 'draw.dt order.dt search.dt', function () { t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) { cell.innerHTML = i+1; } ); } ).draw(); } );