javascript - ¿Por qué la paginación de Footable no se está procesando correctamente?

jquery angularjs

Question

Estoy tratando de implementar Footable, un complemento de JQuery utilizado para hacer que las tablas sean receptivas. Hay un complemento para Footable para agregar paginación. [Manifestación]

Y ( http://fooplugins.com/footable/demos/paging.htm ) para usar el complemento de paginación. Intenté seguir esta demostración, pero mi paginación apareció como una lista vertical sin ordenar. Los botones son funcionales pero antiestéticos. Aquí hay un enlace de imágenes que no puedo publicar aquí porque mi respuesta no es lo suficientemente alta.

Aquí está mi código para la tabla:

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

Answer 1

Tu pie de página debería verse más o menos así:

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

Usted puede ver, eso es diferente de lo que dice en la demostración. Este enlace me mostró la diferencia https://github.com/bradvin/FooTable/issues/136 .

Aquí hay un plan para demostrar el problema: http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM

Answer 2

Debe agregar ambos atributos para la paginación:

data-page-navigation=".pagination" data-page-size="2" en la etiqueta de la tabla

Answer 3

(Si no coloca la paginación en el pie de página de la tabla) No use una clase CSS para las relaciones de tabla a paginación. Use CSS ID en su lugar.

Considera lo siguiente...

MALO - Ejemplo de uso de la clase CSS para relacionar el objeto de paginación a la tabla:

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

El código de javascript footable verá dos objetos de paginación. El que será utilizado por la tabla 1 y que será utilizado por la tabla 2 no es determinista. Esto arroja el javascript footable en un tizzy.

En lugar de utilizar clases CSS, sea más específico usando una ID CSS en su lugar.

BUENO - Ejemplo usando CSS ID para relacionar el objeto de paginación a la tabla:

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

Ejemplo de Javascript:

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