Set Style Multi with using createdRow

xtlc

I struggle on how to use the set style method correctly. My goal is to make some rows selectable, others based on a value in them, not. I searched a bit in the forums and found that one can do that with using the "createdRow" method. I have a loading.gif img in some lines, to indicate the DB is not ready to deliver the data and I want to make those lines not selectable.

First: I also read here, I could probably achieve the same result using "refer". Can someone elaborate me on the difference please?
Second: Can the style of a row be set after the row was created? Here I get a syntax error telling me select is not a function.

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

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


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

colin

You could do something like this - this is allowing selection only on "Ashton Cox" as he's got the class selectable on the tds. You could add that class in createdRow.

I don't understand your first question, sorry, but for the second, yep, you can add classes on each draw with drawCallback,

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

xtlc

I was referring to something like this in my first question: https://codepen.io/RedJokingInn/pen/jKzPpQ?editors=0010

kthorngren

The createdRow executes only once for each row. You can use rowCallback instead which runs each time the table is drawn to update the rows based on the current data.

If this doesn't help then, as Colin asked, please provide a simple test case so we can see what you ahve in order to offer suggestions.

Kevin

xtlc

I have some testing to do, but this works fine! You guys are amazing!

My complete code for any people who might look for something similar:

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

    "createdRow": function(row, data, dataIndex) {
        if (data["value"].includes("loading.gif")) {
            $(row).css("color", "red");
        } else {
            $(row).addClass("selectable");
        } },

    select: {
        style: "multi",
        selector: "tr.selectable",
    },   
    order: [[ 1, 'asc' ]],
});