Saya berjuang untuk menunjukkan pagination footable dan masih tidak dapat mengetahuinya meskipun saya memeriksa dokumentasi dan semua contoh lainnya. Dalam kode berikut, dua tabel dicoba dengan cara yang berbeda dan keduanya tidak menampilkan pagination. Adakah yang bisa menjelaskan dan menunjukkan apa yang diperlukan untuk menampilkan pagination dalam kode ini? Terima kasih.

<html lang="en">
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.css">
    </head>


    <body>
        <table class="table footable table-striped" data-paging="true">
                <thead>
                        <tr>
                            <th data-breakpoints = "xs">Col 1</th>
                            <th data-breakpoints = "xs">Col 2</th>
                            <th data-breakpoints = "xs">Col 3</th>  
                        </tr>

                </thead>
                <tbody>
                        <tr>
                            <td>test1</td>
                            <td>test2</td>
                            <td>test3</td>
                        </tr>
                        <tr>
                                <td>test1</td>
                                <td>test2</td>
                                <td>test3</td>
                            </tr>
                            <tr>
                                    <td>test1</td>
                                    <td>test2</td>
                                    <td>test3</td>
                                </tr>
                                <tr>
                                        <td>test1</td>
                                        <td>test2</td>
                                        <td>test3</td>
                                    </tr>   

                    </tbody>
                    <tfoot>

                    </tfoot>
        </table>
        <table id="tblTesting" class="testingTable table table-striped" data-paging="true" data-page-navigation=".pagination" >
        </table>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.js"></script>


    </body>
</html>

<script>

    $(document).ready(function(){
        $('.footable').footable();


       $('#tblTesting').footable({
        paging:{"enabled": true},
        columns:[
  {"name":"id","title":"ID","breakpoints":"xs sm","type":"number","style":{"width":80,"maxWidth":80}},
  {"name":"firstName","title":"First Name"},
  {"name":"lastName","title":"Last Name"},
  {"name":"something","title":"Never seen but always around","visible":false,"filterable":false},
  {"name":"jobTitle","title":"Job Title","breakpoints":"xs sm","style":{"maxWidth":200,"overflow":"hidden","textOverflow":"ellipsis","wordBreak":"keep-all","whiteSpace":"nowrap"}},
  {"name":"started","title":"Started On","type":"date","breakpoints":"xs sm md","formatString":"MMM YYYY"},
  {"name":"dob","title":"Date of Birth","type":"date","breakpoints":"xs sm md","formatString":"DD MMM YYYY"},
  {"name":"status","title":"Status"}
],
"rows":[
  {"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"}
]

    });
    });
</script>


1
Khant Htet Naing 23 Oktober 2019, 06:07

1 menjawab

Jawaban Terbaik

Hanya saja karena datanya kecil, coba isi dengan lebih dari 10 atau smth seperti itu. Sebagian besar plugin pagination menggunakan 10 sebagai default.

1
aungwin thant 23 Oktober 2019, 04:05