我正在尝试向我的 datatable 的工具栏添加一个按钮。 所以,我的datatable是:
var dataTable = $('#employee-grid').DataTable(
{
processing: true,
serverSide: true,
ajax: "employee-grid-data.php", // json datasource for AJAX Data
"pagingType": "full_numbers", //Adding Last and First in Pagination
stateSave: true,
"language":{ //Custom Message Setting
"lengthMenu": "Display _MENU_ records per page", //Customizing menu Text
"zeroRecords": "Nothing found - sorry", //Customizing zero record text - filtered
"info": "Showing page _PAGE_ of _PAGES_", //Customizing showing record no
"infoEmpty": "No records available", //Customizing zero record message - base
"infoFiltered": "(filtered from _MAX_ total records)" //Customizing filtered message
},
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //For customizing number of data sets per page
});
我所做的是这样的:
$(document).ready(function()
{
var dataTable = $('#employee-grid').DataTable(
{
processing: true,
serverSide: true,
ajax: "employee-grid-data.php", // json datasource for AJAX Data
"pagingType": "full_numbers", //Adding Last and First in Pagination
stateSave: true,
"language":{ //Custom Message Setting
"lengthMenu": "Display _MENU_ records per page", //Customizing menu Text
"zeroRecords": "Nothing found - sorry", //Customizing zero record text - filtered
"info": "Showing page _PAGE_ of _PAGES_", //Customizing showing record no
"infoEmpty": "No records available", //Customizing zero record message - base
"infoFiltered": "(filtered from _MAX_ total records)" //Customizing filtered message
},
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //For customizing number of data sets per page
"dom": '<"toolbar">frtip'
});
$("div.toolbar").html('<button type="button" id="any_button">Click Me!</button>');
} );
但是我发现了这样的东西:
但是我喜欢这样的东西-
有人可以帮忙吗?
最佳答案
解决方案
使用下面的代码:
JavaScript:
var table = $('#example').DataTable({
// ... skipped ...
dom: 'l<"toolbar">frtip',
initComplete: function(){
$("div.toolbar")
.html('<button type="button" id="any_button">Click Me!</button>');
}
});
CSS:
.toolbar {
float:left;
}
演示
参见this jsFiddle用于代码和演示。
关于jquery - 使用 jQuery DataTables 添加按钮到工具栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32549987/