Postponing fnDrawCallback function till a JQuery click function has been called

sgrozny

So I have a dataTable which is created from a json. This datatable is associated with a JQPlot which is redrawn every time the datatable hits the fnDrawCallBack function (sortGrpahs).

function buildRoleDataTable(divID) {
var data = jQuery.parseJSON($("#data").val());
$(divID).show();
 var table = $(divID).DataTable({
    "fnDrawCallback": function (oSettings) {
         sortGraphs(divID, oSettings, currdom + "|Role");
        paginationControl(divID);
    },...

In my datatable column headers i have several icons which provide different functionality for the user. These include a hide column and an option to include a different columns data in the JQPlot.

function HeaderClick(event, thisObj) {
    //If an image is clicked, don't sort graph
    if ($(event.target).is("i")) {
        originalHeaderclass= event.target.className;
        var classClicked =originalHeaderclass.substring(0, event.target.className.length- 1);
        switch (classClicked) {
            case "fa fa-eye-slash perHeader":
                event.stopPropagation();
                event.stopImmediatePropagation();
                event.preventDefault();
                var id = event.currentTarget.parentElement.id;
                minusClicked(id, thisObj);
                break;
            case "fa fa-arrow-up perHeader":
                upArrowClicked(event, thisObj);
                break;
            case "fa fa-arrow-down perHeader":
                downArrowClicked(event, thisObj);
                break;
...

The proper order of operations is for the TH on click function to be triggered, which calls the HeaderClick function. This function determines the action that need to be performed. This works fine when I use:

$('th').on('click', function (event) {
    HeaderClick(event, $(this));        
});

However I want these tables to be built dynamically via javascript so I will need to use the following code

$('body').on('click','th', function (event) {
   HeaderClick(event, $(this));
});

When i use the Jquery click event (even if the tables are still being built statically in the HTML, the code hits the fnDrawCallback BEFORE my HeaderClick function and that breaks the desired functionality.

Is there a way to make sure the Jquery click event is hit PRIOR to the fndrawcallback function? Or is there another callback function I can use to allow my function to be called first?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hmmm - tricky one! The issue is of course the event bubbling. DataTables' draw is synchronous so if the click event gets to the event listener DataTables as attached to the moment, before your own event listener, then yes, it would execute in the reverse order from want you want.

When you built your DataTable, could you not add the event listener code in there? I'm not clear why it must be a delegated event listener just because it is dynamic? You have other code specific to your implementation in your DataTables initialisation, so why can't it just go after that?

Allan

sgrozny

Very good point. I have implemented it and it works!
Thanks!

I had originally thought of doing it this way but didn't go for it for a few pointless reasons.
First I have probably over 20 DataTables (love this plug-in, Great job!) and I didn't want to call it in every DataTable initialization.

And I was also being lazy didn't want to rewrite the code in HeaderClick to work with this approach so I figured if there was a way to get around the bubbling and leave my functions alone that I would go for that.

Thanks again for the quick response!
I have some more questions for you but i will post them in a new thread to keep this clean.