How to apply the single column and multi column ordering at a time

Rameshwari

I have a use case , where I need to sort the first column and then second column and then third column (by Title alphanumerically).
I was able to achieve the first requirement by mentioning as below in data table initialization

            // DataTable Configuration and initialization
            var table = jQuery('#urraTable').DataTable( {
                    orderCellsTop: true,
                    order: [[ 0, 'asc' ]],  

                             columnDefs: [ {
                                targets: [ 0,1,2 ],
                                orderData: [ 0, 1 ,2]
                               } ]  ,   

and in the table rendering as below below snippet is a velocity code

      #if(!$urraID.equals(""))
         ##<td data-order="$urraID" align="center" >$urraID</td>
         <td align="center" >$urraID</td>
      #else
         <td bgcolor="#d9d9d9"></td>
      #end

      ## User Scenario
      #if(!$uScenario.equals(""))
          #set($uScenarioTitle = $uScenario.getTitle())

          **<td data-order="$uScenarioTitle">#RenderWorkItem($uScenario)</td>**

      #else
          <td bgcolor="#d9d9d9"></td>
      #end

      ## user Task
        #if(!$uTask.equals(""))
            #set($uTaskTitle = $uTask.getTitle())
        #end
     ** <td data-order="$uTaskTitle">#RenderWorkItem($uTask)</td>**

but I could not sort on individual column ...If I define order data as above

Customer wants the both way of sorting ,, would it be possible

Thanks
Rameshwari

rf1234

I had a similar use case. The client wanted to be able to order by individual columns (using the small sorting arrows in each column header) but they also wanted to be able to restore the more complex initial sort order without having to reload the page.

The good news is that you can achieve any initial sort order without using "orderData". You would only use it if you want to allow the user to sort by multiple columns or different columns when clicking on the sort arrow of one particular column. That of course limits the users ability to sort by individual columns. So in your use case it doesn't really make sense to use "orderData".

I resolved it with a custom button restoring the original sort order (or whatever you require).

//custom button to restore the original sort order of the cash flow data table
$.fn.dataTable.ext.buttons.resetOrder = {
    text: 'Reset ordering',
    action: function ( e, dt, button, config ) {
        dt.order( [0, 'asc'], [1, 'asc'], [2, 'asc'] )
          .draw();
    }
};

And that is from my data table configuration (changed it to your columns for initial ordering):

columnDefs: [
            ......
],
order: [ [0, 'asc'], [1, 'asc'], [2, 'asc'] ], 
select: {
    ......
},

Rameshwari

Thank you for your response

But in my case the customer wants both the options of multiple columns sorting means depending on first the second and depending on the second the third ...
and also he wants individual sorting's on columns

Thanks

kthorngren

If you have a certain set of columns that you always want ordered use orderFixed. The user can then order the other columns as they wish.

Kevin

rf1234

But in my case the customer wants both the options of multiple columns sorting means depending on first the second and depending on the second the third ...
and also he wants individual sorting's on columns

... and that is what I suggested ...

The initial sorting is multi column and subsequently you can sort individually. If you want to restore the initial sorting (i.e. multi column): you can use the custom button.

Rameshwari

Can you please share some example .... and how you have called the function on button

rf1234

Well, my code above is the example :-).

You can just replace this:

order: [[ 0, 'asc' ]],  
                 columnDefs: [ {
                    targets: [ 0,1,2 ],
                    orderData: [ 0, 1 ,2]
                   } ]  ,  

with this:

order: [ [0, 'asc'], [1, 'asc'], [2, 'asc'] ],

If all you do in "columnDefs" is what is stated above, you don't need "columnDefs" at all.

I personally don't use "orderCellsTop" and I cannot give you any advice on whether or not it is required in your use case.

Just put the button definition on top of your data table configuration.

You can refer to the button very easily in your data table configuration like this for example:

buttons: [
    {   extend: "create", editor: editor},
    {   extend: "edit",   editor: editor},
    {   extend: "remove", editor: editor},
                "resetOrder"
]