Have a look at the demo - just below the table it shows the JS and CSS files to include (although the styling of the list has gone a little crazy on that page - I'll fix that).
Should column searching be working in the Bulma tech preview? The search boxes appear, but the column search doesn't happen (the master search still works). The code I am using to display the column search boxes is:
$('#dataTable tfoot th').each( function () {
var title = $('#dataTable thead th').eq( $(this).index() ).text();
$(this).html( '<b>'+title+'</b><br><br><input type="text" placeholder="Search">' );
} );
The rest of my search code is identical to that in the manual (except that my table ID is 'dataTable').
I also notice that the column search box disappears as soon as I page forward, and does not reappear if I return to the 1st page. It does, of course, reappear if I reload the page.
I love Bulma. I love DataTables. It would be so wonderful to have both play nicely together!
Thank you, Kevin, for this help. It is good to know that the DataTables/Bulma/searching can work. I, too, can get it to work with the example code you provided (which is slightly different from the example code I had found on the internet). The problem comes when I try to get your code to work in conjunction with my initialization code. In the code provided below, your code works fine, but as soon as I uncomment the initialization section, searching stops working. How do I make this all work together, please?
Michael Barraclough
<script>
$(document).ready(function() {
/*
$('#example').DataTable( {
retrieve: true,
pageLength: 5,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
columnDefs: [
{ searchable: false,
targets: 0},
{ orderable: false,
targets: 0 } ],
order: [1, 'asc'],
scrollX: true
} );
*/
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table = $('#example').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
} );
</script>
The search ability has nothing to do with the styling framework you are using. Might be best to start a new thread if you want to troubleshoot your column search issue.
Thank you, Kevin. I have corrected the columnDefs as you have suggested. I have also realized, by trial and error (my JS is very limited), that the initialization statements needed to be combined with the column searching statements. I had had these in a separate section (see above). Now they are all combined (almost) everything is perfect
My last hurdle is to not have a column search box under the first column (as searching is disabled on that column).
Michael Barraclough
<script>
$(document).ready( function () {
// Setup - add a text input to each footer cell
$('#dataTable tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<b>'+title+'</b><br><br><input type="text" placeholder="Search">' );
} );
var table = $('#dataTable').DataTable({
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
order: [1, 'asc'],
scrollX: true,
columnDefs: [
{ searchable: false,
targets: 0,
orderable: false,
} ],
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
} );
</script>
A little more help please. I am trying to alter the initialisation section depending upon the value of the PHP variable $col1 (which will either be the text string ID or an empty text string). I have been able to test that my JS variable ID contains the value of my PHP variable $col1 by adding it to the $(this).html content and the tfoot element is suitably amended.
What is the correct syntax in var table, please, to change the content based on the value of ID? My current if (ID=='ID') {order: [1, 'asc'],} else {order: [0, 'asc'],} does not work, but indicates what I am trying to do.
I am also looking for pointers as to how to add the 'x' clear functionality to the column search input fields (in the same way as in the master search input field).
Michael Barraclough
<script>
$(document).ready( function () {
var ID="<?php echo $col1; ?>";
// Setup - add a text input to each footer cell
$('#dataTable tfoot th.search').each( function () {
var title = $(this).text();
$(this).html( '<b>'+title+'</b><br><br><input type="text" placeholder="Search">' );
} );
var table = $('#dataTable').DataTable({
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
if (ID=='ID') {order: [1, 'asc'],} else {order: [0, 'asc'],}
scrollX: true,
columnDefs: [
{ searchable: false,
targets: 0,
orderable: false,
} ],
initComplete: function () {
// Apply the search
this.api().columns([1,2,3]).every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
} );
</script>
I have implemented the clear functionality. I had not realized that the 'clear' solution (input type='search') did just that (and no more). At a later date I will try and explore having that specific filter removed, but other filters remaining in force. I have also achieved making my script work differently according to a PHP variable (my solution is a little different as my example was a simplification and I couldn't make the ternary solution work for what I wanted).
<script>
$(document).ready( function () {
var ID ="<?php echo $col1; ?>";
// Setup - add a text input to each footer cell
$('#dataTable tfoot th.search').each( function () {
var title = $(this).text();
$(this).html( '<b>'+title+ID+'</b><br><br><input type="search" placeholder="Search">' );
} );
if (ID=='ID') {
// executed if the first column is an ID column
var table = $('#dataTable').DataTable({
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
order: [1, 'asc'],
scrollX: true,
columnDefs: [
{ searchable: false,
targets: 0,
orderable: false,
} ],
initComplete: function () {
// Apply the search
this.api().columns([1,2,3]).every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
} else {
// executed if the first column is not an ID column
var table = $('#dataTable').DataTable({
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
order: [0, 'asc'],
scrollX: true,
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
}
} );
</script>
Answers
You don't want to include the DataTables stylesheet if you are including the Bulma one. You can safely drop that.
Allan
Have a look at the demo - just below the table it shows the JS and CSS files to include (although the styling of the list has gone a little crazy on that page - I'll fix that).
Ah yes, thank you for pointing that out. Now it is working fine.
Should column searching be working in the Bulma tech preview? The search boxes appear, but the column search doesn't happen (the master search still works). The code I am using to display the column search boxes is:
The rest of my search code is identical to that in the manual (except that my table ID is 'dataTable').
My CSS is:
maggot.css contains:
My JS is:
Michael Barraclough
I also notice that the column search box disappears as soon as I page forward, and does not reappear if I return to the 1st page. It does, of course, reappear if I reload the page.
I love Bulma. I love DataTables. It would be so wonderful to have both play nicely together!
Michael Barraclough
I copied the code from the text input search example into this Bulma theme test case and it seems to work:
http://live.datatables.net/hefepoci/1/edit
Please update the test case or provide a link to your page for debugging. look for errors in your browser's console.
Kevin
Thank you, Kevin, for this help. It is good to know that the DataTables/Bulma/searching can work. I, too, can get it to work with the example code you provided (which is slightly different from the example code I had found on the internet). The problem comes when I try to get your code to work in conjunction with my initialization code. In the code provided below, your code works fine, but as soon as I uncomment the initialization section, searching stops working. How do I make this all work together, please?
Michael Barraclough
Are you initializing Datatables somewhere else in your code?
You have this:
These should be combined into one object since you have the same target, for example:
This will disable searching for column 0.
Please provide a link to your page or a running test case replicating the issue so we can help debug. Or update my test case.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
The search ability has nothing to do with the styling framework you are using. Might be best to start a new thread if you want to troubleshoot your column search issue.
Kevin
Thank you, Kevin. I have corrected the columnDefs as you have suggested. I have also realized, by trial and error (my JS is very limited), that the initialization statements needed to be combined with the column searching statements. I had had these in a separate section (see above). Now they are all combined (almost) everything is perfect
My last hurdle is to not have a column search box under the first column (as searching is disabled on that column).
Michael Barraclough
This is what it looks like, showing my amended column search fields and the link to a modal help for searching in the tables.
To remove that search under the first column, change
to be
then that first column won't be returned by
columns()
Colin
Wow. Thank you, Colin.
A little more help please. I am trying to alter the initialisation section depending upon the value of the PHP variable $col1 (which will either be the text string ID or an empty text string). I have been able to test that my JS variable ID contains the value of my PHP variable $col1 by adding it to the $(this).html content and the tfoot element is suitably amended.
What is the correct syntax in
var table
, please, to change the content based on the value of ID? My currentif (ID=='ID') {order: [1, 'asc'],} else {order: [0, 'asc'],}
does not work, but indicates what I am trying to do.I am also looking for pointers as to how to add the 'x' clear functionality to the column search input fields (in the same way as in the master search input field).
Michael Barraclough
You will want to read about Ternary operators. Mayeb something like this will work:
Make sure the
input
type issearch
nottext
.Kevin
Thank you Kevin.
I have implemented the clear functionality. I had not realized that the 'clear' solution (input type='search') did just that (and no more). At a later date I will try and explore having that specific filter removed, but other filters remaining in force. I have also achieved making my script work differently according to a PHP variable (my solution is a little different as my example was a simplification and I couldn't make the ternary solution work for what I wanted).
Here we go! It has been a while since the original post, but we now support Bulma across DataTables, Editor and all of our extensions for DataTables.
Allan