Official version of Bulma theme for Datatables

allan

You don't want to include the DataTables stylesheet if you are including the Bulma one. You can safely drop that.

Allan

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).

Stomped

Ah yes, thank you for pointing that out. Now it is working fine.

barraclm

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').

My CSS is:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bulma.min.css">
<link rel="stylesheet" href="./css/maggot.css">

maggot.css contains:

tfoot input { width: 100%; padding: 3px; box-sizing: border-box; }

My JS is:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bulma.min.js"></script>

Michael Barraclough

barraclm

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

kthorngren

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

barraclm

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>

kthorngren

but as soon as I uncomment the initialization section, searching stops working. How do I make this all work together, please?

Are you initializing Datatables somewhere else in your code?

You have this:

        columnDefs: [
            {   searchable: false,
                targets: 0},
            {   orderable: false,
                targets: 0 } ],  

These should be combined into one object since you have the same target, for example:

        columnDefs: [
            {   searchable: false,
                targets: 0,
                orderable: false,
             } ],  

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

barraclm

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>

barraclm

This is what it looks like, showing my amended column search fields and the link to a modal help for searching in the tables.

colin

To remove that search under the first column, change

        this.api().columns().every( function () {

to be

        this.api().columns([1,2,3]).every( function () {

then that first column won't be returned by columns()

Colin

barraclm

Wow. Thank you, Colin.

barraclm

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>

kthorngren

change the content based on the value of ID?

You will want to read about Ternary operators. Mayeb something like this will work:

            var table = $('#dataTable').DataTable({
                lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                 
                order: [[ID=='ID' ? 1 : 0, 'asc']],
                 
                scrollX: true,

I am also looking for pointers as to how to add the 'x' clear functionality to the column search input fields

Make sure the input type is search not text.

Kevin

barraclm

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).

<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>

allan

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