Select option not working

lortz

Can anyone help me understand why the select option doesn't work? The datatables debugger doesn't show any problem.
Here's a fiddle: https://jsfiddle.net/va7yzdr4/15/

kthorngren

You need to include the select extension files (JS and CSS). See the Select Install docs for the steps.

Kevin

lortz

Thank you, I just forgot to include them into the fiddle but I had included them into my actual project. Now it works on the fiddle (https://jsfiddle.net/va7yzdr4/16/) but, oddly enough, it doesn't on my project. Let me explain better: if I put these options:

$(document).ready(function() {
    var table = $('#myTable').DataTable({
        "order": [[ 1, "desc" ]],
        dom: 'Bfrtip',
        "stripeClasses": ['odd', 'even'],
        stateSave: true,
        "stateDuration":  -1,
        stripHtml: false,
        select: {
            info: true,
            style: 'multi',
            selector: 'td'
        }
    });
});

it works fine (I can select the rows). But, as soon as I change the selector into:

$(document).ready(function() {
    var table = $('#myTable').DataTable({
        "order": [[ 1, "desc" ]],
        dom: 'Bfrtip',
        "stripeClasses": ['odd', 'even'],
        stateSave: true,
        "stateDuration":  -1,
        stripHtml: false,
        select: {
            info: true,
            style: 'multi',
            selector: 'td:nth-child(2)'
        }
    });
});

it stops working, I think, because I cannot see the info when I select the rows and I can select the rows not only by clicking on the 2nd column (as it should be) but by clicking on any column. Why does this happen?

kthorngren

I added the info: true option to your test case. Yes, it does work as expected in your test case.
https://jsfiddle.net/g4xdaky5/

Why does this happen?

Hard to say without seeing the problem. There must be more to your Javascript than you are showing. Are you reinitializing the Datatable? Do you html5 data attributes on the -tag table` tag enabling select?

Kevin

lortz

I'm not reinitializing the Datatable. What do you mean with your last question?

I tried to copy the computed HTML code of my actual project into jsfiddle with the exact same js and css and it works perfectly on jsfiddle, but not on my website.

How can I debug it? The browser console shows no errors at all.

kthorngren

What do you mean with your last question?

Many Datatables options can be defined using HTM5 attributes as documented here:
https://datatables.net/manual/options#HTML-5-data-attributes

How can I debug it?

Good question. What happens if you remove the whole select option:

        select: {
            info: true,
            style: 'multi',
            selector: 'td:nth-child(2)'
        }

Are you still able to select rows? If so then its being enabled somewhere else presumably overwriting the above.

Provide a link to your page so we can take a look.

Kevin

lortz

Yes, I can still select the rows when I remove that portion of the code.

I cannot link the page since it's not on the internet... how can I check where it's being loaded? Or how can I override it?

kthorngren

how can I check where it's being loaded? Or how can I override it?

That is all custom to your code. I've suggested all the places I can think to look. With the select option removed and you select a row does the info element show selected rows? If not then it sounds like you have other code to select rows that is not using the select extension.

Kevin

lortz

OK, I found the code that was selecting the rows, removed it and now it all works as expected! Many, many thanks for the help!