Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  September 2022 edited September 2022 Answer ✓

  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 Posts: 26Questions: 9Answers: 0

  September 2022 edited September 2022

  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 Posts: 63,542Questions: 1Answers: 10,476 Site admin

  September 2022 Answer ✓

  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 Posts: 26Questions: 9Answers: 0

  September 2022

  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 Posts: 26Questions: 9Answers: 0

  September 2022

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