Preselct "SELECTED rows from ajax data

monkeyboy

I have created a checkbox, and a show selected button, but when I preload "selected item" from ajax, I am unable to force API to actually SELECT predefined checked rows:

        var exampleTable = $("#tableName").DataTable( {
            select: {
                style:    "multi",
                selector: "td:first-child"
            },
            ajax: {
                "url":  "ajax.php",
                "type": "POST",
                data: function(d) {
                    d.filter1=$("#select1").val();
                    d.filter2=$("#select2").val();
                    d.filter2=$("#select3").val();
                },
            },
            columns: [
                {
                    data:   "dummyTable.shortList",
                    render: function ( data, type, row ) {
                        if ( type === "display" ) {
                            if (row.dummyTable.shortList == 0){
                                return "<input type=\"checkbox\" class=\"editor-active\">";
                            }
                            else {
                                return "<input type=\"checkbox\" checked class=\"editor-active\">";
                            }
                        }
                        return data;
                    },
                    className: "dt-body-center"
                },
                { data: "dummyTable.field1","sClass": "binCentered" },
                { data: "dummyTable.field2","sClass": "binCentered" },
                { data: "dummyTable.field3","sClass": "binCentered" },
                { data: "dummyTable.field3" }
           ],

            "createdRow": function ( row, data ) {
                // Set the checked state of the checkbox in the table              //$("input.editor-active", row).prop( "checked", data.dummyTable.shortList == 1 );
                if (data[0] = 1) $(row).select;
            },
            buttons: [
                {
                    extend: "selected",
                    text: "Show selected rows only",
                    action: function ( e, dt, button, config ) {
                        if (button.text() == "Show selected rows only") {
                            dt.rows({ selected: false }).nodes().to$().css({"display":"none"});
                            button.text("Show all");
                        }
                        else {
                            dt.rows({ selected: false }).nodes().to$().css({"display":"table-row"});
                            button.text("Show selected rows only");
                        }
                }
        }               
            ]
    });

colin

Hi @monkeyboy ,

If you change this line:

            if (data[0] = 1) $(row).select;

to be:

            if (data[0] === 1) this.api().row($(row)).select();

it should do the trick, see here. Note, you may need === '1' if it's a string.

Cheers,

Colin

monkeyboy

Colin,

Thanks very much! This was the trick.....
A helpful hint for anyone else struggling with the object model...

if( data[0] == 1 ) may require modification to fit YOUR specific ajax data object

My ajax data looks like this:

JSON    
     draw   1
     data   […]
        0   {…}
              dummyTable    {…}
              active:   0
             nextField:    "abcde"
.....

So I had to address it this way:

if (data.dummyTable.active === "1") 

monkeyboy

and the strange ajax is due to the fact that I require a query with aggregate functions (GROUP BY and SUM) which are not currently supported in the back end