मैं फुटेबल पेजिनेशन दिखाने के लिए संघर्ष कर रहा हूं और अभी भी इसका पता नहीं लगा सकता, भले ही मैंने दस्तावेज़ीकरण और अन्य सभी उदाहरणों की जाँच की हो। निम्नलिखित कोड में, दो तालिकाओं को अलग-अलग तरीकों से आज़माया जाता है और दोनों में पेजिनेशन नहीं होता है। क्या कोई समझा सकता है और बता सकता है कि इस कोड में पेजिनेशन दिखाने के लिए क्या आवश्यक है? धन्यवाद।

<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 अक्टूबर 2019, 06:07

1 उत्तर

सबसे बढ़िया उत्तर

यह सिर्फ इसलिए है क्योंकि डेटा छोटा है, 10 या उससे अधिक के साथ पॉप्युलेट करने का प्रयास करें। अधिकांश पेजिनेशन प्लगइन्स डिफ़ॉल्ट रूप से 10 का उपयोग करते हैं।

1
aungwin thant 23 अक्टूबर 2019, 04:05