How to show the searchbuilder button in footer
How to show the searchbuilder button in footer
sarooptrivedi
Posts: 45Questions: 15Answers: 2
I am new with this datatable library.
How to show the search builder button in gridtable footer?
below is my script
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
"ajax": {
"url": "/Company/AjaxHandler",
"type": "GET",
"datatype": "json"
},
"columns": [
{ data: "Name", "autoWidth": true },
{ data: "Address", "autoWidth": true },
{ data: "Town", "autoWidth": true },
{ data: "EmployeesNumber", "autoWidth": true },
{ data: "DateCreated", "autoWidth": true },
{ data: "DateUpdated", "autoWidth": true }
],
"scrollY": 200,
"scrollX": true,
colReorder: true,
stateSave: true,
dom: 'Blfrtip',
//lengthMenu: [
// [10, 25, 50, -1],
// ['10 rows', '25 rows', '50 rows', 'Show all']
//],
"buttons": [
/* 'pageLength',*/
'searchBuilder',
{
extend: 'colvis',
postfixButtons: ['colvisRestore']
},
{
extend: 'copy',
className: 'btn btn-dark rounded-0',
text: '<i class="far fa-copy"></i> Copy',
autoFilter: true,
sheetName: 'Exported data',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
messageTop: 'This is web portal grid export',
className: 'btn btn-dark rounded-0',
text: '<i class="far fa-file-excel"></i> Excel',
autoFilter: true,
sheetName: 'Exported data',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
className: 'btn btn-dark rounded-0',
text: '<i class="far fa-file-pdf"></i> Pdf',
autoFilter: true,
sheetName: 'Exported data',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
className: 'btn btn-dark rounded-0',
text: '<i class="fas fa-file-csv"></i> CSV',
autoFilter: true,
sheetName: 'Exported data',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
className: 'btn btn-dark rounded-0',
text: '<i class="fas fa-print"></i> Print',
autoFilter: true,
sheetName: 'Exported data',
exportOptions: {
columns: ':visible'
}
}
],
columnDefs: [
{
targets: -1,
visible: false
}
]
});
table.buttons().container()
.appendTo($('div.eight.column:eq(0)', table.table().container()));
});
</script>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
This example use
searchBuilder.container()
to place the Search Builder button where you like in the document. Change.prependTo(table.table().container())
to the appropriate jQuery method, appendTo() for example, and selector for the element to place the Search Builder button. Another example, note thediv
placed in the HTML after thetable
.http://live.datatables.net/qowozopo/1/edit
Kevin