Question

最近，我切换到FooTable 3来克服版本2中的行限制问题。当然，这打破了我与表的所有程序化交互。目标是让外部事件触发具有特定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隐藏，而是被创建和销毁，存储在附加到窗口的FooTable对象中。因此，DOM中的唯一行是显示的行，这意味着row = $(table).find('tbody tr td.ID:contains("' + id + '")').parent()将不再有效。
访问寻呼机实例的能力。在v2的情况下，我可以使用paginatePlugin = footableData.plugins[1]来获取寻呼机。虽然确实很脆弱，但我没有看到与v3中的pager实例进行交互的可比方法，或者实际上，根本没有与FooTable实例进行交互的任何方式。

所以，实质上，我需要知道如何找到所需行的页面并选择该页面。此时我在初始化选项之后的所有文档都是http://fooplugins.github.io/FooTable/docs/jsdocs/index.html，但我无法为我的目的做出正面或反面。

Answer 1

事实证明，有一组相对隐藏的功能可以控制它。函数FooTable.get()将允许您为所需的FooTable实例传递jquery选择器。从那里，您可以使用ft.rows.all计算总行数（ft是我为结果表选择的名称）。我找到的另一个函数是.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');

足部3：以编程方式更改页面

1 个答案: