How do I continue do things after finish footable initialize?

Question

I use query plugin named fooTable for my data table (http://fooplugins.github.io/FooTable/)

Below is my code to initialize my datatable...

jQuery(function($){
  $('.table').footable({
      "paging": { "size": 15 },
      // "toggleColumn": "last",
      "showToggle": false,
      "columns": $.get('/footable/js/columns.json'),
      "rows": $.get('/footable/js/rows.json')
  })
})

My question is how to do something after it finished initialize?

I try

jQuery(function($){
  $('.table').footable({
      "paging": { "size": 15 },
      // "toggleColumn": "last",
      "showToggle": false,
      "columns": $.get('/footable/js/columns.json'),
      "rows": $.get('/footable/js/rows.json')
  })
  .done(function(){
    alert('do something');
  })
})

But it was not working.

score 3 · Answer 1 · answered Oct 06 '16 at 14:13

You should use the postinit.ft.table event along with the on option as mentioned by @Roamer-1888. (You can click on any option to see a small example of how to use it.)

jQuery(function($) {
    $('.table').footable({
        // your other options
        'on': {
            'postinit.ft.table': function(e, ft) {
                /*
                 * e: The jQuery.Event object for the event.
                 * ft: The instance of the plugin raising the event.
                 */
                // all initialized - do stuff here
            }
        }
    });
});

Alternatively the second argument to the plugin constructor is a ready callback so you can just provide a function to execute once everything is done.

jQuery(function($) {
    $('.table').footable({
        // your options
    }, function(ft){
        /*
         * ft: The instance of the plugin raising the event.
         */
        // all initialized - do stuff
    });
});

I was unable to get anything working throughout all of these answers except for the last option here with the second argument, for anyone else looking to do stuff after everything is initialized this is what you will want. — maxshuty, Feb 07 '18 at 17:21
Also, there's a `ready.ft.table` event, useful in this cases. — DavidC, Oct 10 '18 at 22:34

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

use postinit.ft.table event. See http://fooplugins.github.io/FooTable/docs/jsdocs/FooTable.html#.event:Table%2522postinit.ft.table%2522

The postinit.ft.table event is raised after any components are initialized but before the table is drawn for the first time. Calling preventDefault on this event will disable the initial drawing of the table.

Also, postdraw.ft.table is what you may want.

About how to use it

I am not very familiar to it. So give it a try. If it doesn't work tell me.

.when('postinit.ft.table', function(e, ft){
    //ok
})

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 02 '16 at 10:57

ch271828n

15,854
5
53
88

How do i use this event? – Dreams Oct 02 '16 at 11:27
@aBloomer answer is modified. see it – ch271828n Oct 03 '16 at 03:37
Really appreciated. – Dreams Oct 03 '16 at 04:42

score 1 · Answer 3 · answered Oct 03 '16 at 12:29

The FooTable documentation is difficult to follow as it's not over-endowed with examples.

I think @turle's suggestion to use the "postinit.ft.table" event is a good one, however I can't see that .when('postinit.ft.table', function(e, ft){ /* do something */ }) is the right syntax.

As far as I can gather from here, event handlers are attached using the "on" option.

Try :

jQuery(function($) {
    $('.table').footable({
        'paging': { 'size': 15 },
        // "toggleColumn': "last",
        'showToggle': false,
        'columns': $.get('/footable/js/columns.json'),
        'rows': $.get('/footable/js/rows.json'),
        'on': {
            'postinit.ft.table': function(e, ft) {
                /*
                 * e: The jQuery.Event object for the event.
                 * ft: The instance of the plugin raising the event.
                 */
                // all initialized - do stuff here
            }
        }
    });
});

score 1 · Answer 4 · answered Jun 04 '20 at 10:12

1

Just try 'ready.ft.table'

Something like

jQuery(function($){
    $('.table').footable({
    "on": {
        "ready.ft.table": function(e, ft){
            // bind to the plugin initialize event to do something
        }
    }
   });
});

answered Jun 04 '20 at 10:12

Chukwugozie

11
1

How do I continue do things after finish footable initialize?

4 Answers4

About how to use it