0

I'm using Footable V3 (version 3.0.1) with the paging functionality and would like to provide my user's the ability to modify items per page dynamically.

I've tried two methods to accomplish this but neither has worked:

1) I tried passing a new page size in code after having populated the table.

$('#availableResults').footable(
    {
        "paging": 
            "size": count
        }
    });

This caused the table to immediately become improperly formatted and the following error appeared in the console:

FooTable: unhandled error thrown during initialization. Error: No columns supplied.(…)(anonymous function) @ footable.js:1705

2) Next I tried changing the value of the table attribute for page size on the fly after the table had already been populated.

angular.element( '#availableResults').attr( 'data-paging-size', count );

This had no effect.

I know in footable V2 it was possible to change the page size attribute and then trigger a table redraw to accomplish dynamic items per page changes. I understand V3 is a total rewrite but maybe there is a similar mechanism for V3 that I'm not aware of. I read through all the V3 docs located below with no luck.

http://fooplugins.github.io/FooTable/docs/components/paging.html

http://fooplugins.github.io/FooTable/docs/jsdocs/index.html

Any help is appreciated.

Joe
  • 21
  • 6

2 Answers2

1

You can use 'paging & size' function. 

$('.table').footable({ // define all of table with 'table' class as footable
  "paging": { 
    "size": 5 // set the default page size to 5 rows
  }
});

Or you can easily use this attribute.

<table class="table" data-paging-size="5">
    ...
</table>

For more information about Footable Pagination, you can see at: https://fooplugins.github.io/FooTable/docs/components/paging.html

Robby Alvian Jaya Mulia
  • 1,286
  • 14
  • 15
Abdun Nafay Qureshi
  • 11
  • 1
0

You need to reinitialize the table and pass in the columns, and rows data in the object parameter.

FooTable.init('#availableResults', {
    paging: {size: 5}, columns: columns, rows: rows
});

Where rows and columns are in the parent scope and populated with the data needed for the table

Ketzalkotal
  • 11
  • 2