JQuery DataTable select row with checkbox

Question

I am rendering a JQuery DataTable within a ReactJS application and the table draws fine. However when I try to draw checkboxes they are not drawn. I also tried to hard code two rows to be selected and I get a

TypeError: table.columns(...).select is not a function.

import 'datatables.net';
import dt from 'datatables.net-bs';
import 'datatables.net-select';

const table = container.find('.dataTable').DataTable({
  columnDefs: [{
    orderable: false,
    className: 'select-checkbox',
    targets: 0,
  }],
  select: {
    style: 'os',
    selector: 'td:first-child',
  },
  order: [[1, 'asc']],
});

table.columns([1, 2]).select();

Once I get row selection with checkboxes my next goal is to have column selection by checkboxes (ie row of checkboxes above header, on selection the column below is highlighted).

Any idea why checkbox row rendering may not be working?

Gyrocode.com · Accepted Answer · 2016-12-31 13:33:54Z

1

Most likely you forgot to include CSS/JS files for Select extension. It needs to be included in addition to jQuery DataTables files.

Either use Download builder and include Select extension or download individual files for Select extension.

Also take a look at jQuery DataTables Checkboxes extension that simplifies handling of checkboxes in a table powered by jQuery DataTables.

answered Dec 31, 2016 at 13:33

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery DataTable select row with checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related