Datatables Responsive - sort by column names clicked in ul list

chrismaliszewski

Hi everyone.

Short introduction to the problem. In my app I have datatables. In some form user set which columns he/she want to see and in which order. Because of that I call all columns by their name by table.column("COLUMN_NAME:name"). I found a way to order columns by name which is table.column("COLUMN_NAME:name"):order('DIRECTION').

Now I'm having problem with ordering table according to clicked column name in ul list in responsive extension. Is there any way to make it possible to order table in such a way?

I found line 764 in dataTables.responsive.js which creates li in ul list. But I don't know how to make clicked li trigger sorting function like clicking th do.

Thank you for your help and any advice.

Krzysztof Maliszewski

allan

The order of the items in the list is defined by the columns - it will display in the same order as the columns that have been hidden.

If you want to display in a different order you would need to define a custom renderer: responsive.details.renderer.

Allan

chrismaliszewski

This is not what I meant.

What I want to beeing accomplished is sorting whole table according to clicked li title. In other words: there is li with title Name, if I click this li, whole table is sorted by column Name.

allan

Oh I see - thanks for the clarification. You would need to add an event listener to the elements that will then trigger the order() method.

Allan

chrismaliszewski

So... You suggest to add listener to span.dtr-title which onclick will take its parent (li) data-dtr-index attribute value which is column index and call table.column(COLUMN_INDEX).order('DIRECTION') function and redraw table by draw(), yes?

If it works it'd be great because it'd work in newer versions of extension because of no changes in dataTables.responsive.js.

I'll try today and post an answer in afternoon.

Krzysztof Maliszewski

allan

Yes - that sounds like the perfect approach to me. You will need to make sure the index is an integer (just *1) so DataTables sees it as a column data index selector.

Allan

chrismaliszewski

Solved my problem so read next post.

chrismaliszewski

Problem was of course in creating .dtr-title after creating "on" event. Delegate must be used:
$(document).on("click", ".dtr-title", function(){
alert(1);
});

chrismaliszewski

Think it works:

$(document).on("click", "span.dtr-title", function(){
    var index = $(this).parent().data('dtr-index');
    if(Math.floor(index) == index && $.isNumeric(index)){
        var table = $('#TABLE_NAME').DataTable();
        if(table.order()[0][0] == index && table.order()[0][1] == 'asc') {
            table.order(index, 'desc');
        } else {
            table.order(index, 'asc');
        }
        table.draw();
    } else { alert('error'); }
});

I'm not very good and JS so sorry if code is nasty.

CSS for clearer view:

span.dtr-title{
    cursor: pointer !important;
}

CSS for li sorting icons is:

li.sorting_asc,
li.sorting_desc {
  cursor: pointer;
  *cursor: hand;
}
li.sorting_asc,
li.sorting_desc{
  background-repeat: no-repeat;
  background-position: center right;
}
li.sorting_asc {
  background-position: left;
  padding-left:20px !important;
  background-image: url("../../../datatables/media/images/sort_asc.png");
}
li.sorting_desc {
  background-position: left;
  padding-left:20px !important;
  background-image: url("../../../datatables/media/images/sort_desc.png");
}

(remember to change paths to images! these are in my case)

chrismaliszewski

And the last thing to do is adding sorting icons to all ul>li rows like in th. I don't know how to force dataTables script to add class after above sorting and drawing dataTable.

I think I need some draw callback after this kind of ordering. But is drawCallback enought and if 'yes', how to call it?

allan

You would need to use order to known when an order event has occurred and then update the sub-title headers accordingly.

Allan

chrismaliszewski

One more thing I've forgotten to mention: I use server side data.

As far as I understand what you mean is that I should use order order event to know the exact point in time that order has occured to update li with classes sorting_asc or sorting_desc as they should be. But...

There is a problem: because I use server side data I need to use draw() method to redraw data. Because of that whole table is redrawn and there is no peace of code in original dataTables which would draw order icons in li so I need to do it after draw() (or am I wrong?).

I know what to put inside above function which is sth like

$(".sorting_asc, .sorting_desc").remove(".sorting_asc .sorting_desc");
$("li[data-dtr-index="INDEX"]").each(function(){
   $(this).addClass("sorting_asc OR sorting_desc AS SHOULD BE");
});

How should I create such a function?

allan

Yes, if you use server-side processing (which I didn't know before, sorry), you would use draw since your would need to update this on every draw.

Allan