使用 jQuery DataTables 将按钮添加到工具栏
Adding a button to toolbar with jQuery DataTables
我想在 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。
你也可以使用数据表button.js。这是来源 link:
https://datatables.net/extensions/buttons/examples/initialisation/custom.html
不要忘记添加以下库(如上文所述URL)
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js
或者你也可以像下面这样:
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
} );
来源:https://datatables.net/extensions/buttons/examples/initialisation/custom.html
我想在 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。
你也可以使用数据表button.js。这是来源 link:
https://datatables.net/extensions/buttons/examples/initialisation/custom.html
不要忘记添加以下库(如上文所述URL)
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js
或者你也可以像下面这样:
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
} );
来源:https://datatables.net/extensions/buttons/examples/initialisation/custom.html