Select row with createdRow

kieronapple

Hi, I need to use createdRow to match it with a set of data returned from a database.

I'm able to get the rows to be selected with this method however things like column sorting and the row selected counts dont seem to be working with my current method.

Maybe createdRow isn't the correct thing to be using?

Code below with comments to explain.

    criteriaTable = $('.criteriaTable').DataTable({
        data: criteriaHolder,
        columns: criteriaColumns,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bLengthChange": true,
        "bInfo": true,
        "scrollX": true,
        "dom": "Bfltip",
        searching: true,
        destroy: true,
        columnDefs: [{
            orderable: true,
            className: 'select-checkbox',
            targets: 0
        }],
        buttons: [
            {
                text: 'Select All Filtered',
                action: function ( e, dt, node, config ) {
                   
                },
                attr: { id: 'selectAllButton', class: 'btn blue btn-sm' }
            },
            {
                text: 'Reset',
                action: function ( e, dt, node, config ) {
                   
                },
                attr: { id: 'resetAllButton', class: 'btn blue btn-sm' }
            }
        ],
        select: {
            style: 'multi',
            // selector: 'td:first-child'
        },
        order: [[0, 'asc']],
        "createdRow": function (row, data, index) {

            $(row).children('td').children('input').attr('data-criteriaType', selectType); //- Set a data attribute to later use (Irrelevant to below code)

            $.each(selectedCriteria, function (index, criteria) { //- Loop through my dataset
                    if (data[1] === criteria) {  //- If data in the table matches the data in my dataset, select the row
                        $(row).addClass('selected'); //- This selects the row however, sorting, row selected counts dont work with this 
                    }
            });

        },
    });

colin

Hi @kieronapple ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kieronapple

Hi colin, please see this link where I have replicated in the correct environment.

http://live.datatables.net/baqocehi/1/edit?html,js,output

colin

Hi @kieronapple ,

Thanks for the test case, that helped understand it. As you say, createdRow isn't the best place as the table is still being drawn. Moving it into initComplete like this seems to do the trick,

Cheers,

Colin

kieronapple

Hi Colin, although that seems to fix the rows selected. The sorting doesn't seem to work still?

colin

Hi @kieronapple ,

Can you explain how you feel it's not working, please, as it's ordering as I would expect, for example this screenshot here,

Cheers,

Colin

kieronapple

So what I'd expect to happen, when you order the column with the Select boxes in, it should sort the checked boxes first.

colin

Ah, I see, it needs a cryptic setting, orderDataType, see your test case modified here.

kieronapple

@colin that link doesn't seem any different?

colin

That's odd, that was an earlier incarnation. I've forked a new version, can you check this one, please.

kieronapple

Yep that works better @colin is it possible to order them by selected on load of the table? Sorry to be a pain!

colin

No worries, happy to help. If you add order() to the end of the initComplete, it does the trick - see here. If the order is wrong way round, change it to 'desc'.

kthorngren

Try adding api.draw(); to the end of the initComplete function.

Kevin