Sort arrow on custom sort with w2ui.js

Question

I am working on w2ui where i got my own custom sort function. The sort function is working find but the arrow is not displaying in the table header.

I have applied my custom sort in lastname and you can see the arrow on clicking the firstname.

How can i display the arrow mark?

Thanks in advance.

JSFIDDLE LINK

onSort : function(event){
            if(event.field == "lname"){
                event.preventDefault();
                records = w2ui.grid.records;
             /*My custom logic starts here.(example only) */
                if(ascending){
                records.sort();
                }
                else{
                    records.reverse();
                }
                ascending = !ascending;
                w2ui.grid.reset();
           /*My custom logic endshere.(example only) */
            }
        }

Answer 1

I added this code and i got the arrow.

var addThisClass;
            if(ascending)
                addThisClass="w2ui-sort-up"
            else
                addThisClass="w2ui-sort-down"
            $(".w2ui-grid .w2ui-grid-body table .w2ui-head").each(function(){
                console.log($(this).text())
                if($(this).text().indexOf("Last Name")!=-1){
                    $(this).addClass(addThisClass);
                    $(this).find("div").addClass(addThisClass);
                }
            })

I have updated the jsFiddle