Javascript 为什么Footable分页无法正确渲染？

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

和（）用于使用分页加载项。我试着跟随这个演示，但我的分页显示为一个垂直的无序列表。这些按钮很实用，但很难看。是一个链接图片，我不能张贴在这里，因为我的声誉不够高

以下是我的表格代码：

<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>

{{formAttr.attributes.name}
（{{{formAttr.type}}）
提交时间
{{$parent.response.results[formAttr.att_id]}
{{响应.提交时间}

您的页脚应该如下所示：

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

你可以看出，这与演示中所说的不同。这个链接向我展示了不同之处

---

下面是一个例子来说明这个问题：

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

---

data page navigation=“.pagination”data page size=“2”

到表标记中（如果未将分页放置在表页脚中），请不要对表到分页关系使用CSS类。改用cssid

考虑以下几点

错误-使用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>

<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>

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

---

您是否包含footable.core.css？@Julien我包含了footable.core.css，但没有为表到分页关系使用css类。见下面的答案。。。