DataTable with one checkbox column but HTML source

x14841003

Hello,

Is there somewhere an example of DataTable with a checkbox column not linked to any ajax script or database table but only HTML as source ?

Thanks again !, Bye
x1484

x14841003

For example, here is my testing and i cannot make it working

http://live.datatables.net/feyuhiqu/1/edit

Thanks again

colin

Hi @x14841003 ,

There's this example, using Ajax, but I suspect you've seen this one already.

When you say it's not working, what do you see that isn't working. I modified it here to include the Editor resources, and it looks like it's behaving as expected to me.

Cheers,

Colin

x14841003

Hi Colin

It works on the live.datatable.net site but not here. The checkboxes are never displayed. I'm sure i'm missing something in the css and/or js definitions. Is it possible to display what has been included in that live.datatable.net site ?

I have modified the example again including column search boxes and it works nice on live.datatable.net but again here the checkboxes are never displayed.

I'm using bootstrap here, could this be the reason ? I know that bootstrap is not using conventional checkboxes...

Thanks, Bye
x1484

x14841003

Please forget my comment about bootstrap. I could make it working as datatable single row select so it cannot be the reason. Here was my code fragment with column 0 being the checkbox :

$('#example thead tr').clone(true).appendTo( '#T1C thead' );
$('#example thead tr:eq(1) th').each( function (i) {
        
        if (i > 0) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value, true, false )
                        .draw();
                }
            } );
        }
    } );

 var table = $('#example').DataTable( {
        orderCellsTop: true,
        fixedHeader: true,
        pageLength: 100,
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
    } );

Here i would like to achieve the same but multi-select.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Is it possible to display what has been included in that live.datatable.net site ?

If you look at the HTML tab, you'll see all the sources included on the page.

Here i would like to achieve the same but multi-select.

To be clear, is the issue now that you've got it working with checkboxes, and you want multi-select support now?