Footable 3：以编程方式更改页面

Question

最近，我切换到 FooTable 3 以克服版本 2 中的行限制问题。当然，这破坏了我与 table 的所有编程交互。目标是让外部事件触发分页到具有特定 ID 的行并突出显示该行。 v2如下：

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');

这取决于两个因素：

一定能找到行。在 v3 中，行不使用 css 隐藏，而是创建和销毁，存储在附加到 window 的 FooTable 对象中。因此，DOM 中唯一的行是正在显示的行，这意味着 row = $(table).find('tbody tr td.ID:contains("' + id + '")').parent() 将不再有效。
访问寻呼机实例的能力。在 v2 的情况下，我可以使用 paginatePlugin = footableData.plugins[1] 来访问寻呼机。虽然公认脆弱，但我看不到与 v3 中的 pager 实例交互的类似方法，或者实际上，根本没有与 FooTable 实例交互的任何方式。

因此，从本质上讲，我需要知道如何找到所需行所在的页面以及 select 该页面。在这一点上，我拥有的所有超过初始化选项的文档都是 http://fooplugins.github.io/FooTable/docs/jsdocs/index.html，我无法为我的目的制作正面或反面。

Answer 1

事实证明，有一组相对隐藏的函数可以控制它。函数 FooTable.get() 将允许您为所需的 FooTable 实例传递一个 jquery 选择器。从那里，您可以使用 ft.rows.all 计算总行数（ft 是我为结果 table 选择的名称）。我发现的另一个函数是 .gotoPage()，它允许我在做一些数学运算后翻到正确的页面。

这是最终的解决方案：

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');

Footable 3：以编程方式更改页面

Footable 3: Change page programmatically

jquery

footable