Preselct "SELECTED rows from ajax data

Preselct "SELECTED rows from ajax data

monkeyboymonkeyboy Posts: 60Questions: 19Answers: 0

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");
                        }
                }
        }               
            ]
    });

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • monkeyboymonkeyboy Posts: 60Questions: 19Answers: 0

    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") 
    
  • monkeyboymonkeyboy Posts: 60Questions: 19Answers: 0

    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

This discussion has been closed.