Search code examples
jqueryfootable

Footable 3: Change page programmatically

Recently, I switched to FooTable 3 to overcome the row limit problem in version 2. This, of course, broke all of my programmatic interaction with the table. The goal is to have an outside event trigger pagination to a row with a specific ID and highlight that row. The v2 is as follows:

var table = $("#grid").find('table.footable'),
    footableData = table.data('footable'),
    paginatePlugin = footableData.plugins[1],
    row = $(table).find('tbody tr td.ID:contains("' + id + '")').parent(),
    rowIndex = row[0].rowIndex,
    rowCount = $(table).find('tbody tr').length,
    paginationCount = paginatePlugin.footable.pageInfo.limitNavigation,
    pageNumber = Math.floor((rowIndex - 1) / paginationCount),
    pagerNumber = pageNumber + 1,
    pagingControl = $(table).find('tfoot ul.pagination');

$(table).find('tr').removeClass('gridHighlight');
paginatePlugin.paginate(footableData, pageNumber);
paginatePlugin.createLimited(pagingControl, footableData.pageInfo, pageNumber);
$(table).find('tfoot ul li a:contains("'+pagerNumber+'")').parent().addClass('active');
$(row).addClass('gridHighlight');

This relied on two factors:

  1. It must be able to find the row. In v3, rows are not hidden with css, but rather created and destroyed, being stored in the FooTable object attached to the window. So, the only rows in the DOM are those being displayed, which means that row = $(table).find('tbody tr td.ID:contains("' + id + '")').parent() will no longer work.

  2. The ability to access the pager instance. In the case of v2, I could use paginatePlugin = footableData.plugins[1] to get at the pager. While admittedly fragile, I see no comparable method of interacting with the pager instance in v3, or, in fact, any way with interacting with a FooTable instance at all.

So, in essence, I need to know how to both find what page the desired row is on and select that page. All the documentation I have at this point past initialization options is http://fooplugins.github.io/FooTable/docs/jsdocs/index.html, which I've not been able to make heads or tails of for my purposes.

Solution

  • It turns out, there is a relatively hidden set of functions that control this. The function FooTable.get() will allow you to pass a jquery selector for the FooTable instance you want. From there, you can count the total rows by using ft.rows.all (ft is the name I chose for the resulting table). The other function I found was .gotoPage(), which allowed me to page to the proper page after doing a little math.

    This was the final solution:

    var ft = FooTable.get($("#grid").find("table"));
var rowCount = ft.rows.all.length;
var rowIndex = 1;
$.each(ft.rows.all, function (k,v) {
  if (v.cells[0].value == id) {
    rowIndex = ft.rows.all.indexOf(this);
  }
});
var paginationCount = $("#grid").find("table").data('paging-size');
var pageNumber = Math.floor((rowIndex) / paginationCount);
$("#grid").find("table tr").removeClass('gridHighlight');
ft.gotoPage(pageNumber +1);
$("#grid").find('table tr td.ID:contains("' + id + '")').parent().addClass('gridHighlight');