Footable and capturing the expand row event

Question

I have searched for any reasonable help on this and I keep coming back to the same comments. Namely not very good documentation.

I am about to use the jquery plugin fooTable which converts a normal html table to something pretty and usable.

It is easy to use with the following command after you have put your table on the page.

        $('.footable').footable();

However I want to capture the event when a row is expanded.

Here is an example of the table in action. I am actually using the Inspinia framework.

http://wrapbootstrap.com/preview/WB0R5L90S

You need to click on the tables / footables menu link on the left hand side.

I am not sure if this is fooTable issue/event that I should know or if this is general knowledge about capturing events using jquery that applies to lots of things.

My jquery language skills are only a few months old as I am a long time VB, MSSQL programmer who is learning something new.

Thanks to anyone who is kind enough to offer any light to a newbie!

Neil

Answer 1

You can bind functions to certain footable events:

$('.footable').footable().bind({
    'footable_row_collapsed' : function(e) {
        //Your code when a row is collapsed
    },

    'footable_row_expanded' : function(e) {
        //Your code when a row is expanded                  
    },
});

Here is the documentation about footable events interception (http://fooplugins.com/footable/demos/event-interception.htm#docs).

Here is the list of footable events (http://fooplugins.com/footable/demos/events.htm#docs).

Answer 2

Lack of footable documentation will end up being the end of this product.

Documentation is now listed here: https://fooplugins.github.io/FooTable/docs/jsdocs/FooTable.html

The expand event seems to be the most used. Here is an example of swapping out the detail-row using AJAX:

$(".footable").on("expand.ft.row", function (e, ft, row) {
  var EmployeeId = row.value.EmployeeId //Access data from a specific column
  var RowElement = $(row.$el) //This is the underlying DOM element for the row (<tr>...</tr>)
  if (EmployeeId) {
    $.get({
      url: "http://ajax-provider/" + EmployeeId,
      dataType: "html",
      success: function (data) {
        var DetailRow = RowElement.next(".footable-detail-row")
        DetailRow.children("td").html(data)
      }
    })
  }
}