Sort controls customization

Razorblade

Hi everyone,
when rendering, Datatables adds the sort controls only in the TH tags that are within the last TR in the THEAD.
I would like to render sort controls not in the last TR, but in a TR that I'll decide.

It is possible to do such customization? How?

Thanks

mRender

Could you possibly override the datatables classes, names or IDs in your table? So you would override which tr's the datatable has control of? I'm not sure if that would work, but worth a shot maybe.

Razorblade

Hi @Modgility,
inspecting the DOM what I've seen is that Datatables adds 'class="sorting"' to the THs, so I've proceeded to manually add this class but nothing changed, sort controls still render only at the last TR. :(

I'm now tring to do the fix using css..

Razorblade

-[I think that styles are completely overridden by Datatable for thead at least, so I'm stuck with this issue :)]

Nope, it is possible to work using css.

Hope someone can help with some advice :)

Cheers

Razorblade

Here my dirty solution waiting for someone that has a better one,
at initComplete I'll take the whole TH with sorting and move it wherever I need it to be.

    gridConfig.initComplete = function(settings, json) {
        self.services.compile($(element).find('.cgbRenderer'))(self.scope);
        $(self.element).find('.grid-wrapper').css({'display': 'block', 'visibility': 'visible'});
        $('table.dataTable thead tr:last-child').hide();
        $('table.dataTable thead tr:last-child th').each(function(i, v) {
            $(v).css({
                'width': '30px',
                'float': 'right',
                'border': '0px',
                'margin': '0px'
            });
            $('table.dataTable thead tr:eq(1) select').eq(i).after($(v));
        });
    };

allan

Two options:

1. The orderCellsTop option can be used to make the DataTables attach the listener to the top row rather than the bottom.
2. If that isn't flexible enough you can use the order.listener() method to apply a listener to any element on the page you want!

Allan

Razorblade

Hi @allan,
thank you for your answer, your link to 'order.listener()' method bring to a 404 page but I was able to find the correct page (http://datatables.net/reference/api/order.listener%28%29) after a search.

This method is really flexible and it's working, when I press my custom buttons, the last TR with default controls is correctly re-rendered (also using multicolumn sorting) but what I am now missing is how to render current sorting state for each column, could you please help me with this issue?

Thanks!

Razorblade

I suppose I have to read the 'order' request parameter and then do my custom rendering, perhaps in a 'draw' callback...

Razorblade

Nevermind,
I've seend only now that the third option is a callback so I can do my rendering here inside :)

Cheers

Razorblade

Below my final solution, I'm posting it here because perhaps can help somebody and also because I'd like to receive some feedback, perhaps can be enhanced.

I'm using this code within an object instance that runs inside an AngularJS directive, so 'this' refers to the object and 'this.element' is the directive DOM element.

Launching this method below also at 'initComplete' callback will correctly render the custom sort control using initial sorting configuration.

I'll taking sorting data using the 'aaSorting' property, don't know if there is a getter to get this data.

/**
 * Update rendering for CUSTOM sort controls
 * 
 * @param array sortingData
 * @return cgbRenderer
 */
this.renderSort = function(sortingData) {
    var self = this;
    var up = 'ui-icon-triangle-1-n';
    var down = 'ui-icon-triangle-1-s';
    var untouched = 'ui-icon-carat-2-n-s';

    // Removing sort classes from ALL sort controls
    $('th div.ctrl span', $(this.element).find('.grid-wrapper table.dataTable thead tr:eq(1)'))
        .removeClass(up)
            .removeClass(down)
                .addClass(untouched);

    // Apply new classes reading information from current sorting state
    $(sortingData).each(function(a, b) {
        var col = b[0];
        var sort = b[1];
        var sortClass = 'asc' == sort ? up : down;
        var currentSortControl = $('th', $(self.element).find('.grid-wrapper table.dataTable thead tr:eq(1)')).eq(col).find('div.ctrl span');
        currentSortControl
            .removeClass(untouched)
                .addClass(sortClass);
    });

    return this;
};

allan

Oops - thanks for point out the link error. Fixed now.

There is one more option for how to display the sorting - listen for the order event and then apply whatever styling is needed. That will also then work should you decide to use the order() method or any thing else that triggers a reorder.

Allan