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?

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?

• javascript
• jquery
• datatables

Share Improve this question Follow edited Nov 21, 2017 at 13:28 Gyrocode. 59k1616 gold badges156156 silver badges192192 bronze badges asked Nov 21, 2017 at 11:47 Toni LatenzToni Latenz 21622 gold badges55 silver badges2121 bronze badges 2

• Do both tables have the #table id - if so that's the problem. Use a class to select multiple elements as ids must be unique – Rory McCrossan Commented Nov 21, 2017 at 11:49
• They have different id's. As far as i know, the class tag is used to define dataTables options only. – Toni Latenz Commented Nov 21, 2017 at 11:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

So yeah, the problem was, i did not initialize the second table within a $(document).ready function. Doing so, solved the issue.

Thank you for your contribution.