Sort two columns at once on click of either?

Sort two columns at once on click of either?

mihomesmihomes Posts: 150Questions: 19Answers: 0
edited April 2014 in DataTables 1.10
I have two columns in the dt which are using the exact same data set, but I am visually rendering them differently. I also included a toggle button to switch view from one to the other. On table load column 1 is visible and column 2 is hidden. On click of the toggle button this reverses and 1 is hidden and 2 is visible and so on.

Since the columns are using the same data set and only one is visible at a time their ordering will always be the same, however, if I sort on column 1 and toggle the view the sorted column is now hidden of course. Is there something I can do where no matter which of these columns is sorted BOTH are sorted? This would ensure that if either was used to sort it will always appear to the user as the still active sort column.

Or... perhaps I should go about the display another way? The toggle button would change the display for a single column rather than loading two with the same data set?

I should note this is server-side so I cannot use a custom search function.


  • mihomesmihomes Posts: 150Questions: 19Answers: 0
    If anyone is interested... for the time being I went with another approach. There is only one column now (rather than two of the same data set) and the different view is rendered accordingly to the toggleStatus value. This does require a draw() and db query after every toggle though.

    // set a global toggle status
    var toggleStatus = true;

    "data": "window_title",
    "render": function ( data, type, row ) {
    if (toggleStatus) {
    return '';
    else {
    return ''+data+'';

    // the handler for my toggle button
    // toggle ss view from thumbnail / list view
    $('#dtToggle').on( 'click', function () {

    //toggle the settings true/false
    toggleStatus = !toggleStatus;
    //redraw with new view
    //set button text
    if (toggleStatus){
    $(this).html(' List View');
    else {
    $(this).html(' Thumbnail View');

This discussion has been closed.