Column sorting not functioning

Searle

Hi all,

I've been banging my head against this one for a couple days on and off, and I haven't found a solution.

Sorting only appears to work on the ID column (first column). I believe it stopped working when I started created render functions in the columnDefs.

I've tried adding sort classes to the table itself, adding orderable=True to the columnDefs, but nothing appears to alter the situation.

Note: This is a snippet from an object that contains both the datatable and an D3 chart bound together. dataColumns = [1, 2, 3, 4] and totalColumn = [4]. totalColumn's custom formatting is ignored because of precedence in the columnDefs being set by dataColumn.

                    <table id="time_to_quote_details" class="display compact" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th class="text-left">ID</th>
                                <th class="text-right">open</th>
                                <th class="text-right">0-4</th>
                                <th class="text-right">4-8</th>
                                <th class="text-right">8+</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td>Total</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

var table = $("#" + this.tableId).dataTable({
                data: tableData,
                destroy: true,
                empty: true,
                lengthChange: false,
                searching: false,
                bInfo: false,
                paging: false,
                scrollY: currentTableSize,
                percentage: this.percentage,
                columns: [
                    {width: '40%'}
                ],
                columnDefs: [
                    {
                        targets: this.dataColumns,
                        render: function(data, type, row, meta) {
                            var percentage = meta.settings.oInit.percentage;
                            return ChartDataTable.getFormattedDataCell(data, percentage);
                        },
                        className: 'text-right'
                    },
                    {
                        targets: [0],
                        render: function(data) {
                            return data;
                        },
                        className: 'text-left'
                    },
                    {
                        targets: this.totalColumn,
                        render: function(data, type, row) {

                            return ChartDataTable.getFormattedChangeCell(data);
                        },
                        className: 'text-right'
                    }
                ],
                footerCallback: function (tfoot, data, start, end, display) {

                    var api = this.api();
                    var dataTable = dataTable_array[this[0].id];

                    var dataColumnTotals = [], i, columnIndex;
                    if(dataTable.percentage) {

                        for(i = 0; i < dataTable.dataColumns.length; i++) {
                            columnIndex = dataTable.dataColumns[i];
                            dataColumnTotals[i] = dataTable.totalRecord[columnIndex];
                        }

                    } else {

                        for(i = 0; i < dataTable.dataColumns.length; i++) {
                            columnIndex = dataTable.dataColumns[i];
                            // get column total
                            if (api.column(columnIndex).data().length){
                                dataColumnTotals[i] = api.column( columnIndex ).data()
                                .reduce( function (a, b) {
                                    return a + b;
                                })
                            } else{ dataColumnTotals[i] = 0;}
                        }

                    }

                    var delta = 0;
                    if(dataTable.dataColumns[1] != 0) {
                        delta = Math.round(((dataColumnTotals[1] / dataColumnTotals[0]) - 1) * 100);
                    }

                    // populate summation column
                    var totalIndex = dataTable.totalColumn[0];
                    $(api.column(totalIndex).footer(totalIndex)).html(ChartDataTable.getFormattedChangeCell(delta));


                    // populate data footers
                    for(i = 0; i < dataTable.dataColumns.length; i++) {

                        var value = dataColumnTotals[i];
                        columnIndex = dataTable.dataColumns[i];
                        if(dataTable.percentage) {
                            value = (value * 100).toFixed(1);
                        } else {
                            value = value.toLocaleString();
                        }

                        $(api.column(columnIndex).footer(columnIndex)).html(value);

                    }

                }
            });

            var tBody = $('#' + this.tableId + ' tbody');
            tBody.unbind('dblclick');
            table = $(table).DataTable();
            var chartDataTable = this;
            tBody.on('dblclick', 'tr', function() {
                var data = table.row( this ).data();
                chartDataTable.drillDown(data[0]);
            });
        },
        error: function() {
            $('#' + this.tableId).DataTable().clear().draw();
        },
        contentType: 'application/json',
        dataType: 'json'
    });

ChartDataTable.getFormattedChangeCell = function (data) {
    /* Returns formatted delta column based on data
     * :param data: Float delta percentage
     * :return: HTML Element
     */

    var icon = "", fontClass = "";

    if(data > 0) {
        icon = " <span class='glyphicon glyphicon-arrow-up'></span> ";
        fontClass = "text-success";
    } else if(data < 0) {
        icon = " <span class='glyphicon glyphicon-arrow-down'></span> ";
        fontClass = "text-danger";
    } else {
        icon = " <span class='glyphicon glyphicon-arrow-right'></span> ";
        fontClass = "text-warning";
    }

    return "<font class='" + fontClass + "'>" + data + icon + "</font>";

};

ChartDataTable.getFormattedDataCell = function(data, percentage) {
    /* Returns formatted cell data
     * :param data: Float cell data
     * :param percentage: Bool whether data is a percent
     * :return: formatted number
     */

    if(typeof(data) != 'undefined') {
        if(!percentage) {
            return data.toLocaleString();
        } else {
            return (data * 100).toFixed(1);
        }
    } else {
        return 0;
    }

};

Thanks

allan

Can you link to a test case showing the issue or the debugger will hopefully give enough information to understand what is going on.

Allan