Unable to sort rendered column.

smader

Hi,

I have a rendered column ("Rank") based on the sum of another (hidden) column which is an array[4] of integers either 0 or 1. Ideally, the user selects a range of values for each column via HTML inputs and the array is updated with a 1 (criteria satisfied) or 0 (not satisfied). With the onchange of the input triggered, a function is called to update the array with the appropriate value and the Rank column updated.

What I am seeing is the DataTable does not sort the Rank column after a draw() (done from within the input onchange function), even though the order is set on the Rank column (see below). I have tried to do this manually using table.order([[6,'asc']]).draw() but even though the up/down arrow on the column changes, the order of values does not.

At this stage I'm at a loss. Any pointers appreciated.

Full example here: http://live.datatables.net/upgrade/45

Cheers,
Stacy.

            $('#calibrator').DataTable( {

                "data": data,

                "order": [[ 6, "desc" ]],
 
                "columnDefs": [
                    { "targets": 6, "render": function(data,type,full,meta) { return full[7].sum(); } },
                    { "targets": 7, "visible": false },
                ],

                "columns": [
                    { "title": "Name" },
                    { "title": "Az" },
                    { "title": "El" },
                    { "title": "HA" },
                    { "title": "dSun" },
                    { "title": "dMoon" },
                    { "title": "Rank" },
                    { "title": "Weights" },
                ]

            } );

The input onchange call and function is below, with only one of the criteria shown.

<td>
<input id="minAZ" type="number" min="0" max="360" onchange="setWeights();" placeHolder="Min"></input>
</td>

function setWeights(type){

    var table = $('#source').DataTable();

    table.rows().every( function() {

        var d = this.data();
        var w = d[7];

        var min = parseFloat($('#min').val());
        var max = parseFloat($('#max').val());
        w[0] = (d[1] >= min && d[1] <= max) ? 1 : 0;

        d.counter++;

        this.invalidate();

    });

    table.draw();

}
~                                   

debugger code: ohunog

smader

In my code, I'm using v1.10.10 and the jsbin is using nightly, but the issue remains across versions.

glenderson

at line 19 in example above, replace with this.invalidate(); with this.data(d).draw();

There are still other issues in the example, but setting data() will help you along.

smader

Thanks for that.

I'm curious what "other issues" you refer to? All seems to work as expected.

jr42.gordon

Instead of replacing .invalidate() with .draw(), why not add .render(). If you .draw() for every row, the performance will be hell. You should try and limit the amount of draws you perform.

smader

TypeError: this.data(...).render is not a function

jr42.gordon

this.invalidate().render()

The effectively calls the render function for each cell in the row.