Combine columns and allow sort on the columns

samjgarnham

Hi,

I need to display more columns than I have space for.

I would like to address this by combining columns using line-breaks, see this example:
https://jsfiddle.net/nq779mtm/embedded/result/
(I am only showing one row, but you get the picture)

I want the user to be able to click on either of the lines in the header to sort by that underlying column.
E.g. in my example they could click on Delay to sort by Delay, or Len to sort by Len.

Any suggestions on how to do this with DataTables?

Sam.

allan

Hi Sam,

Use the columns.render property to render data. For example, the first column in this example is the concatenation of two data points.

Allan

samjgarnham

Thanks allan, but in your example you can only sort by first name, not surname. I want to keep the ability to sort by either of the combined data points.

allan

No - the example should sort by surname as well (it is the combined result that it is sorted by). Try using the editing tools on that page to add another row with first name "Airi" (or any other name that is in the demo data). It should be sorted correctly.

Allan

samjgarnham

Sorry if I didn't make myself clear; your example sorts on the calculated full name, which starts with the first name.

I want to keep the option of sorting on either underlying data point, so in your example, to switch between sorting on first name or surname, not the full name.

samjgarnham

If I set ordering to false, will datatable then leave the header alone, so I can add my own elements and handlers inside it to show up/down arrows and call order() on click?

Otherwise, I presume I could put two table rows in the header, the first as above, and the second, which I hide with css, which datatables will mess with?

allan

I see. To have sorting on a data point, that data needs to be in a column somewhere. You can stick it into a hidden column and then use the API (order()) to trigger ordering on it if you wish.

Allan

samjgarnham

Thanks for your help. If I continue down this route I'll post my code in case others find it useful.

crush123

I had a similar issue,where i had a column rendered to display First Name and Last Name, but wanted the sort on last name.

The example http://editor.datatables.net/examples/simple/simple.html uses null as the column data source, but if you use lastname as the data source it should work

Here is a code snippet that works for me...

{ data: "tblmembers.MemberLastName", render: function ( data, type, row ) {
            // Combine the first and last names into a single table field
            if ( type === 'display' || type === 'filter' ) {
            return row.tblmembers.MemberFirstName+' '+row.tblmembers.MemberLastName;
            } else {
            return row.tblmembers.MemberLastName;
            }
        } },

allan

Looks good to me - that's what the orthogonal data feature is all about :-)

Allan