Datatables Responsive, Move checkboxes to the left most side. Put caret after it.

darylld

On datatables responsive, if the screen width is low, the other columns will collapse in a collapsible caret and the caret will be put on the left most part of the table. However, my table has check boxes in it, and therefore what happens is, the checkboxes appear after the carets. I would like to have the checkboxes appear before the carets. Any ideas on how I can do this?

Attaching a screenshot on how it looks like :

http://imgur.com/a/FmgJE

Many thanks!

gyrocode

Use responsive.details.type option to designate a separate column for display control.

Add a second column and use the following initialization options.

$('#example').DataTable( {
    // ... skipped ... 
    responsive: {
        details: {
            type: 'column',
            target: 1
        }
    },
    columnDefs: [ {
        className: 'control',
        orderable: false,
        data: null,
        defaultContent: '',
        targets:  1
    } ]
} );

See this example for code and demonstration.

---

See more articles about jQuery DataTables on gyrocode.com.

darylld

Hi gyrocode, thanks! Will try this