为什么Footable分页无法正确呈现？答案

【问题标题】：Why is Footable pagination not rendering properly?为什么Footable分页无法正确呈现？
【发布时间】：2014-06-29 01:27:15
【问题描述】：

我正在尝试实现 Footable，这是一个用于使表格响应的 JQuery 插件。 Footable 有一个附加组件来添加分页。 [演示]

和 (http://fooplugins.com/footable/demos/paging.htm) 用于使用分页插件。我尝试按照这个演示进行操作，但我的分页显示为一个垂直的无序列表。按钮功能齐全但不美观。 Here是一个链接图片，因为我的声誉不够高，所以我不能在这里发布。

这是我的表格代码：

<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
    <thead>
        <th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
        <th>Submission Time</th>
    </thead>
    <tbody>
        <tr ng-repeat="(key, response) in formResponses">
            <td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
            <td>{{response.submission_time}}</td>
        </tr>
    </tbody>
    <tfoot class="">
        <tr>
            <td colspan="5">
                <div class="pagination pagination-centered"></div>
            </td>
        </tr>
    </tfoot>
</table>

【问题讨论】：

您是否包含 footable.core.css ？
@Julien 我确实包含了footable.core.css

标签： javascript jquery angularjs pagination footable

【解决方案1】：

您的页脚应如下所示：

<tfoot class="hide-if-no-paging">
  <tr>
    <td colspan="5" class="text-center">
        <ul class="pagination">
        </ul>
    </td>
  </tr>
</tfoot>

您可以看出，这与演示中所说的不同。此链接向我展示了 https://github.com/bradvin/FooTable/issues/136 的区别。

这是一个演示问题的 plunk：http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM

【讨论】：

【解决方案2】：

你需要为分页添加两个属性：

data-page-navigation=".pagination" data-page-size="2" 进入表格标签

【讨论】：

不要将 CSS 类用于表到分页的关系。请参阅下面的答案...

【解决方案3】：

（如果不将分页放在表格页脚中）不要将 CSS 类用于表格到分页的关系。请改用 CSS ID。

考虑以下...

不好 - 使用 CSS 类将分页对象与表格相关联的示例：

<table id="table1" class="footable" data-page-navigation=".pagination" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div class="pagination hide-if-no-paging"></div>

<table id="table2" class="footable" data-page-navigation=".pagination" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div class="pagination hide-if-no-paging"></div>

footable javascript 代码将看到两个分页对象。哪个将由 table1 使用，哪个将由 table2 使用是不确定的。这会使可脚注的 javascript 变得头晕目眩。

与其使用 CSS 类，不如使用 CSS ID 更具体。

GOOD - 使用 CSS ID 将分页对象关联到表格的示例：

<table id="table1" class="footable" data-page-navigation="#pagination1" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div id="pagination1" class="pagination hide-if-no-paging"></div>

<table id="table2" class="footable" data-page-navigation="#pagination2" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div id="pagination2" class="pagination hide-if-no-paging"></div>

Javascript 示例：

$(document).ready(function () {
    $(".footable").footable();
});

【讨论】：