Why does footerCallback function only allow this.api()?

hzhong

Hello,

Here is a short example using the API to sum a specific column and output in the footer. I have couple questions. Would someone help me understand?

var table =  $('#example').DataTable( {
  "footerCallback": function( tfoot, data, start, end, display ) {
    var api = this.api();
    $( api.column( 5 ).footer() ).html(
        api.column( 5 ).data().reduce( function ( a, b ) {
            return a + b;
        }, 0 )
    );
  }
} );

1. Why does footerCallback function only allow this.api() as the api instance? I tried using table variable but failed, which is also an api instance right?
2. I assume this.api() is an implementation of $( selector ).dataTable().api(). But why does this keyword refer to the dataTable object, not just the object passed in the constructor?

Thank you.

colin

That's really just standard JavaScript questions.

1. table is assigned once the initialisation has completed, so at the point it's called in footerCallback it would still be initialised.

2. this is the context within the callback function - so this.api() is there to assist with the issue in your first question,

Colin

hzhong

Thanks Colin. I understand the first point now. I'm still trying to understand the second one.

I thought this in the callback referred to the below object which was passed to the table initialization. I still don't get it why it's resolved to same as $(#example).dataTable().

{
  "footerCallback": function( tfoot, data, start, end, display ) {
    var api = this.api();
    $( api.column( 5 ).footer() ).html(
        api.column( 5 ).data().reduce( function ( a, b ) {
            return a + b;
        }, 0 )
    );
  }
}

Thank you for your time. You can also point me to some useful resource I can refer.

allan

In footerCallback the scope of this is the table element. We add an api() method to that to allow access to the DataTables API in the callback.

Ideally the scope would just be the DataTables API, but it isn't for legacy reasons. The API (as it currently is) was added in 1.10, while footerCallback was added long before then, so I followed standard jQuery practice and made the scope of the function the element.

It might be changes at some point, but I try very hard to not break backwards compatibility, so more likely this will stay as is, and a new callback or event will be used with the API scope.

Allan

hzhong

Hello Allan,

Thank you for the answer. Maybe I missed something in standard JavaScript as I am still confused why this is resolved to the jQuery object, not the options object passed in the initialization as I thought.

If I have a simplified object a as below

var a = {
  "footerCallback": function( tfoot, data, start, end, display ) {
    console.log(this)
  }
}

Then I call the method a.footerCallback(). The log result is the object a.

But why is it after I passed this a as the options object into the datatable initialization as table = $('#example').DataTable( a ), this resolved to datatable object?

Thanks.

hzhong

Thanks Allan. I'm clear now. Please disregard the last comment.