Order by custom data attribute

kav

I am using Datatables.net 1.10.19 and have a very simple table set up as such

 var table = $('#table').DataTable({
                dom: "<'col-lg-12 bgdark'<'row'<'col-sm-5'i><'col-sm-7'p>>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'col-lg-12 epic'<'row'<'col-sm-5'i><'col-sm-7'p>>>",

            });

My table is looking like this

+-------+----------------------------------+-----------+
| Col1  |               Col2               |   Col3    |
+-------+----------------------------------+-----------+
| Name1 | <div data-param1="11">Text</div> | SomeText2 |
|       | <div data-param2="9">Text</div>  |           |
|       | <div data-param3="8">Text</div>  |           |
| Name2 | <div data-param1="7">Text</div>  | SomeText2 |
|       | <div data-param2="2">Text</div>  |           |
|       | <div data-param3="1">Text</div>  |           |
|       |                                  |           |
+-------+----------------------------------+-----------+

I wanted to introduce a click event that would sort the table based on the data-paramX I am not sure if this is possible?

 $("#sortBy_param1").click(function () {
                var order = table.order();
                var lorder;
                if (order[0][1] === "asc") {
                    lorder = "desc"
                    $('#sortBy_param1').html("<i class=\"fas fa-sort-down\"></i> Sort by X");
                } else {
                    lorder = "asc"
                    $('#sortBy_param1').html("<i class=\"fas fa-sort-up\"></i> Sort by X");
                }
                table.order([?, lorder]).draw();
            });

colin

Hi @kav ,

You can use columns.render to create orthogonal data - this could return something different for the sort.

Hope that helps,

Cheers,

Colin

kthorngren

Also you can use HTML5 data attributes for ordering as described here:
https://datatables.net/manual/data/orthogonal-data#HTML-5

Kevin

kav

All my data parameters are within one cell which makes it hard for me to think of a solution for this, on top of that I would like to have it clickable outside of the table. Nothing comes to my mind unless I could get some code example.

kthorngren

Are you saying that you are showing only two rows in the above table example? And that each row may have one or more data-param values in the column?

Or is that six rows of data?

If multiple data-param per cell are you wanting to sort them within the cell along with the column?

Maybe you can build a test case with an example table and explain exactly how you want it sorted. From there we can give you some ideas or maybe sample code to get you started.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin