jQuery datatables - select not working

Question

When i apply dataTables functionality on a given table and want it to be selecteable, i perform the following:

 var table = $('#table').DataTable( {
        select: true
    });

Which is working fine on the first table on the same site. However, when i try to have a second selecteable table, it just won't select on click. It shows the info message "click to select", though.

I have loaded the dataTables.select.min.js file, after loading the dataTables.js itself. (It works on the first table on the site, even without loading the dataTables.select.min.js, but i wanted to be sure..)

I also tried to apply table.select() after initialization, it does not work either.

Any ideas on why this isn't working properly?

DataTabels version is 1.10.16, select version is 1.2.3

Edit: My second table is being build on a button click, asynchronuosly via ajax call to get the data, and then using js .innerHTML to actualy build the DOM for the second table. So maybe the problem is, that i do not apply the datatables functionality for the second table on $(document).ready, as i do not have the option to do so?

Answer 1

Either initialize your tables using class name once:

var table = $('.example').DataTable({
    select: true
});

or initialize your table separately by using ID:

var table1 = $('#example1').DataTable({
    select: true
});

var table2 = $('#example2').DataTable( {
    select: true
});

See this example for code and demonstration.