How do I sort only a part of a table?

oz1sej

I have one table containing three different types of event participants: Arrangers, teachers and students. I need to be able to sort per name, school or e-mail address, but only the students. Is this possible?

Link to JSfiddle

And if you ask "why don't put them in separate tables", it's for alignment purposes. Some people have short names, others long, and the same goes for schools, as you can see in the example.

rf1234

Your fiddle only contains an HTML table, not a data table. Or am I missing something?

Just create an invisible column that doesn't contain anything for non-students. Then use "columns.OrderData" to use that column for ordering the respective visible column that contains all the values.

https://datatables.net/reference/option/columns.orderData

Let's assume the visible column is column 0 and the invisible column containing nothing for non-students is column 1 then you would use this for example:

new DataTable('#myTable', {
    columnDefs: [
        {  targets: 0, orderData: 1 },
        {  targets: 1, visible: false }
    ]
});

You can also assign classes to your HTML columns and use them. I don't like hard coded values like in the example above.

Then it could look like this for example:

columnDefs: [
        // targets may be classes
        {   targets: "hiddenCols", visible: false },
        {   targets: "scRenderedUpdateTime", orderData: $('#scUpdateTime').index() }
    ],

All of the above ignores the issue that Kevin brought up below: "Datatables doesn't support multiple "tbody" elements ... You would need to fix this first, I guess.

kthorngren

Are you trying to use this table with Datatables?

Datatables doesn't support multiple tbody elements. See the HTML requirements for more details. One option might be to add another column that contains the values Arrangers, teachers and students and have all the data in one tbody Use RowGroup to group the data by this column like this example.

Kevin