datatables prevent rows from being selectable

Question

I have a datatables oject:

var datatablesobject = $('#live_table').DataTable( {
    "columns": [ {
        data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox',
        targets:   0
        },
        { data: "status", orderable: false },
        { data: "serial" },
        { data: "version" }
    ],
    select: {
        style:    'multi'
    },
} );

I want lines with a version < 1 to be greyed out and being prevented from selection by users. I know that datatables has a selector: method as described in this thread but I am not sure this is the right way to go:

 select: {
    style:    'os',   //default but you have to specify it, no idea why
    selector: 'tr:not(.no-select) td'
}

that would mean I simply add a "no-select" id to a div class or so before the check, if I understood that correctly. Is there an easier way? Also how do I use that to color the line I just deselected differently based on the argument?

I found an example with the createdRow method, but as a jQuery noob I am not sure on how to apply that to my datatablesobject.

What is a good approach here?

EDIT: I now tried to include the first answer, but datatables' select can not be called the way I try it unfortunately:

var datatablesobject = $('#live_table').DataTable( {
    "columns": [ {
        data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox',
        targets:   0
        },
        { data: "status", orderable: false },
        { data: "serial" },
        { data: "version" }
    ],

    "createdRow": function(row, data, dataIndex) { 
        if (data["version"] < 3) {
            $(row).css("color", "red"),
            // style multi for multiselect does not work
            select: {
                style:    'multi'        
            };
        } else {
            $(row).css("color", "grey");
        } },


    order: [[ 1, 'asc' ]],

Abed Putra · Accepted Answer · 2020-04-20 16:49:15Z

1

I haven't tested it. But please try this code. You can add a class with createRow. data[2] means version, data[1] means serial and so on..

    var datatablesobject = $('#live_table').DataTable( {
    "columns": [ {
        data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox',
        targets:   0
        },
        { data: "status", orderable: false },
        { data: "serial" },
        { data: "version" }
    ],
"createdRow": function( row, data, dataIndex ) {
             if ( data[2] < 1 ) {        
         $(row).addClass('red');

       }
    },
    select: {
        style:    'multi'
    },});

answered Apr 20, 2020 at 16:49

Abed Putra

1,2132 gold badges21 silver badges41 bronze badges

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

2 Comments

xtlc Over a year ago

Thank you for your time. This code snippet looks good, but turns around the logic a little bit, right? So every row is unselectable and only the ones of the class are selectable?

xtlc Over a year ago

I now tried the code, everything works except the "select" part - I cannot set the select style within the createdRow part :(

Collectives™ on Stack Overflow

datatables prevent rows from being selectable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related