Topic: datatables search footer
Hello,
I would like to combine in the footer datatables column label and search is possible ?
Is possible choice the type search text or select for each column ?
Is possible to change the default "Show entries" ?
Thanks
Mateusz Łubianka staff answered 5 years ago
Hi @Leo,
To change "Show entries" text use this code:
$(document).ready(function () {
$('#dtBasicExample').DataTable({
"oLanguage": {
"sLengthMenu": "Your _MENU_ text"
}
});
$('.dataTables_length').addClass('bs-select');
});
It is possible to use column name in search input e.g. placeholder:
$(document).ready(function () {
$('#dt-filter-search').dataTable({
initComplete: function () {
this.api().columns().every(function (el) {
var column = this;
var search = $(
`<input class="form-control form-control-sm" type="text" placeholder="${this.header().innerHTML}">`
)
.appendTo($(column.footer()).empty())
.on('change input', function () {
var val = $(this).val()
column
.search(val ? val : '', true, false)
.draw();
});
});
}
});
});
Best,
Leo answered 5 years ago
Thanks Mateusz,
For the footer the search i would like alternative input or select. Do you understand.
I would like other question. Is possible to position the arrow sorting in the left label column header. But when don't see the label is not align !
Mateusz Łubianka staff commented 5 years ago
@Leo,
Here you can find version with select: https://mdbootstrap.com/docs/jquery/tables/datatables/#filter-select with search input: https://mdbootstrap.com/docs/jquery/tables/datatables/#filter-search If you want to use mixed (select/search) you must use your custom code. Can you show code snippet or live example with topic from the second question?
Best,
Leo commented 5 years ago
For the second question : I would like the arrow no left but to the right of the label.
Info ! My Snippet and your snippet not working online. Is normal ?
My Snippet : https://mdbootstrap.com/snippets/jquery/leographikgmail-com/2010827 Furthermore why my width is not working ?
And example of your snippet not working https://mdbootstrap.com/snippets/jquery/leographikgmail-com/2010869
Mateusz Łubianka staff answered 5 years ago
@Leo,
You can overwrite Datatables style:
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
left: auto;
right: 5px;
}
https://mdbootstrap.com/snippets/jquery/leographikgmail-com/2010869 this snippet doesn't work beacause Datatables component need additional imported js and css files. And this files aren't included in snippets js/css.
Best,
Leo commented 5 years ago
Thanks @Mateusz Łubianka
is ok for the arrow thanks but the text is margin left ... How delete this spacing also ?
Grzegorz Bujański staff commented 5 years ago
Do you mean padding left? Try this: table.dataTable thead th { padding-left: 0; }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.16.0
- Device: Imac 27\\
- Browser: Chrome
- OS: Max OS Catalina
- Provided sample code: No
- Provided link: No