Row Click Event being disabled when changing table sort

Row Click Event being disabled when changing table sort

radi8radi8 Posts: 31Questions: 6Answers: 0

I have an row click event on a datatable. This event fire correctly and does what it is supposed to do with a new instance of the API.

But, if I click on the header column to change the sort, the row click event is canceled.

I have been trying to replicate this in jsfiddle, but with no success yet. I have not determined what could be causing this on my site. Since it is an internal corporate application, I really cannot grant access to it for review.

What I am looking for is help in creating another event to trigger on the table header event when a user clicks on the column to sort, the table will sort properly, and re-apply the row click event handler.

I tried the following (one of many attempts). The event fires, applies the events, but the table fails to sort.

table_sort_fix: function(e){
        $('#inv_data tbody tr').off('click').on('click',inv.get_row_detail);
        $('#inv_data thead tr th').off('click').on('click',inv.table_sort_fix);
}

Is this possible?

I know that this post is extremely generic, but I hope that I provided enough for suggestions. Please let me know if more is required.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    What do you want to do when clicking the header row?

    Can you have two header rows; one for sorting and one for your click event? If yes you can use orderCellsTop to control which header row is for sorting and which is for the click event.

    Kevin

  • radi8radi8 Posts: 31Questions: 6Answers: 0

    Further review shows that the issue exists when there are multiple pages and the sort displays a row that was not initially displayed.

    It would appear as though the row click event that is applied to the table is only applying it to the first 10 rows displayed, and not to the entire table.

    In THIS (--->) jsfiddle, I added multiple pages to the table. When the event is applied to the table, only the first page work. If you navigate to the 2nd page, it fails.

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    Answer ✓

    Looks like you will want to use Delegated Events as described in the My events don't work on the second page FAQ.

    Kevin

  • radi8radi8 Posts: 31Questions: 6Answers: 0

    It is amazing what happens when you have to type out and talk about issues.

    I had an epiphany and found the issue.

    i was applying the row click event handler AFTER the datatables initialization. If I apply it BEFORE I the DataTables initialization, it all works!

  • radi8radi8 Posts: 31Questions: 6Answers: 0

    kthorngren: yours is a MUCH better solution than mine. It will work for all initialization of datatables and not just for a static table with your API applied to it.

    Thanks!

This discussion has been closed.