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

score 2 · Answer 1 · answered Jan 03 '17 at 23:50

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)
      }
    })
  }
}

THIS SAVED MY LIFE! Btw the row attribut is provided since `3.0.11` — Adam, Aug 14 '19 at 16:18

score 1 · Accepted Answer · answered Mar 06 '16 at 21:09

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).

answered Mar 06 '16 at 21:09

Allan Pereira

2,572
4
21
28

1

Thanks for that. I knew there must be some sort of generic way of adding events etc to an action. – Neil W Mar 08 '16 at 09:59
These links are now dead. This link is the new location: http://fooplugins.github.io/FooTable/docs/getting-started.html#examples except there's very little info on events. – Glenn Nov 21 '16 at 04:21

Footable and capturing the expand row event

2 Answers2

Linked