我想创建一个具有搜索,排序功能且没有的数据表。记录选择下拉列表。我试过下面的代码:
$('#example3').dataTable( {
"aoColumnDefs": [
{ "bSortable": true, "aTargets": [ 0] }
],
"oLanguage": {
"sLengthMenu": "_MENU_ ",
"sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
},
"fnDrawCallback": function ( oSettings ) {
if ( oSettings.bSorted || oSettings.bFiltered )
{
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
"iDisplayLength": 25
});
我无法获得像25、50、100条记录这样的下拉列表。另外,我想在顶部添加一个新按钮以添加新行。
我已经找到了我想要的解决方案。这是该代码,可能会对其他人有所帮助。
$('#example3').dataTable({
"sDom": "<'row'<'col-md-6'l <'toolbar'>><'col-md-6'f>r>t<'row'<'col-md-12'p i>>",
"oTableTools": {
"aButtons": [
{
"sExtends": "collection",
"sButtonText": "<i class='fa fa-cloud-download'></i>",
"aButtons": [ "csv", "xls", "pdf", "copy"]
}
]
},
"aoColumnDefs": [
{ "bSortable": true, "aTargets": [ 0] }
],
"aaSorting": true,
"oLanguage": {
"sLengthMenu": "_MENU_ ",
"sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
},
"aLengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]],
"iDisplayLength": 25
});
在顶部的数据表中添加按钮链接
$("div.toolbar").html('<div class="table-tools-actions"><a href="add" class="btn btn-primary" style="margin-left:12px; background:#5aceff;" id="test2"><i class="fa fa-plus"></i> Add </a></div>');
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句