Question

我想在JS中实现分页。我创建了下一个和上一个正常工作的Button但是我想要页码以及下一个和上一个按钮。我怎样才能实现这个目标。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
</head>
<body>

    <div style="width:400px">
        <table class="paginated">
            <thead>
                <tr>
                    <th class="col">Name</th>
                    <th class="col">Age</th>  
                    <th class="col">City</th>  
                </tr>
            </thead>
            <tbody id="myTable">
            </tbody>

        </table>
        <button id="nextValue">next</button>             
        <button id="PreeValue">Pre</</button>
    </div>

</body>
</html>

下面是我的java脚本代码

<script>

            var table =  $('#myTable');

            myObj =  [

            {"name":"Ford1",  "age":31, "city":"New York" },

            { "name":"BMW2",  "age":31, "city":"New York" },

            { "name":"Fiat3", "age":31, "city":"New York" },

            { "name":"Ford4",  "age":31, "city":"New York" },

            { "name":"BMW5",  "age":31, "city":"New York" },

            { "name":"Fiat6", "age":31, "city":"New York" },

            { "name":"Fiat7", "age":31, "city":"New York" },

            { "name":"Ford8",  "age":31, "city":"New York" },

            { "name":"BMW9",  "age":31, "city":"New York" },

            { "name":"Fiat10", "age":31, "city":"New York" }

            ];

            var arr = $.map(myObj, function(el) { return el; });

            var max_size = arr.length;

            var sta = 0;

            var elements_per_page = 2;

            var limit = elements_per_page;

            goFun(sta,limit);

            function goFun(sta,limit) {

                for (var i =sta ; i < limit; i++) {

                     var $nr = $('<tr><td>A-' + arr[i]['name'] + '</td><td>B-' + arr[i]['age']  + '</td><td>B-' + arr[i]['city'] + '</td></tr>');

                    table.append($nr);
                }
            }

            $('#nextValue').click(function(){

                var next = limit;

                if(max_size>next) {

                    limit = limit+elements_per_page;

                    table.empty();

                    //console.log(next +' -next- '+limit);

                    goFun(next,limit);
                }
            });

            $('#PreeValue').click(function(){

                var pre = limit-(2*elements_per_page);

                if(pre>=0) {
                    limit = limit-elements_per_page;
                    console.log(pre +' -pre- '+limit);
                    table.empty();
                    goFun(pre,limit); 
                }
            });
        </script>

如何提供功能页码。我可以给出什么额外的功能。如何为分页生成动态页码。

如何使用Java Script实现页码分页

0 个答案: