Using pagination of Jquery front-end paging plug-in

Plug in Description: jquery paging is a lightweight plug-in for jquery paging. Only a few simple configurations are required to generate paging controls. And support ajax to get data, custom request parameters, provide a variety of methods, events and callback functions, full-featured paging plug-in.

Case pictures

jQuery Pagination plug in: Download: http://www.jq22.com/jquery-info5697

Step 1: import related jquery and pagination files


        <script src="js/jquery-1.11.3.js"></script>
        <!--paging-->
        <link rel="stylesheet" href="css/pagination.css" />
        <script type="text/javascript" src="js/jquery.pagination.js"></script>

Step 2: HTML code:

Very simple, just a div tag

  <div class="setPageDiv">
            <div class="Pagination" id="pagination"></div>
 </div>

Step 3: JS code:

   $('.Pagination').pagination(pageNum, {
                            num_edge_entries: 1, //Marginal page number
                            num_display_entries: 4, //Main page number
                            items_per_page: 1, //1 item per page
                            prev_text: "Previous page",
                            next_text: "next page",
});

Complete code example display:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
        <!--paging-->
        <link rel="stylesheet" href="css/pagination.css" />
        <script type="text/javascript" src="js/jquery.pagination.js"></script>
        <style>
            .setPageDiv {
                width: 1100px;
                margin: auto;
                margin-bottom: 91px;
                margin-top: 37px;
            }
            
            #pagination {
                margin: auto;
                margin-left: 100px;
            }
            
            .img-responsive {
                width: 30px;
                height: 30px;
            }
        </style>

    </head>

    <body>
        <div class="zxdong">
            <div class="zxdong_inner">
                <ul style="margin-left: 100px;">
                    <!--<div class='row'>
                        <div class='col-md-1   col-xs-1'>
                        <img src='" + img + "'/   class='img-responsive'>
                        </div>
                        <div class='col-md-3   col-xs-3'>
                        <p>11111111111111111 </p>
                        </div></div>-->

                    <div class="list">

                    </div>
                </ul>

            </div>
        </div>

        <div class="setPageDiv">
            <div class="Pagination" id="pagination"></div>
        </div>

    </body>
    <script>
        //paging
        $(function() {

            $('.setPageDiv').change(function() {

                getMsg(parseInt($(this).val()))
            })

            function getMsg(num) {
                $.ajax({
                    url: 'data/bussiness.json',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        //1. Calculate the number of pages
                        var showNum = num;
                        var dataL = data.list.length;
                        var pageNum = Math.ceil(dataL / showNum);
                        $('.Pagination').pagination(pageNum, {
                            num_edge_entries: 1, //Marginal page number
                            num_display_entries: 4, //Main page number
                            items_per_page: 1, //1 item per page
                            prev_text: "Previous page",
                            next_text: "next page",
                            callback: function(index) {
                                //console.log(index);
                                var html = '<ul>'

                                console.log(showNum * index + '~' + parseInt(showNum * index) + parseInt(showNum))
                                for(var i = showNum * index; i < showNum * index + showNum; i++) {
                                    //console.log(i)
                                    if(i < dataL) {

                                        var img = data.list[i].img;
                                        var manager = data.list[i].manager; //Transaction type
                                        html += "<div class='row'>";
                                        html += "<div class='col-md-1   col-xs-1'>"
                                        html += "<img src='" + img + "'/   class='img-responsive'>"
                                        html += "</div>"
                                        html += "<div class='col-md-3   col-xs-3'>"
                                        html += "<p>" + manager + "</p>"
                                        html += "</div></div>";

                                    }
                                }
                                html += '</ul>';
                                $('.list').html(html)
                            }
                        })

                    }
                })
            }
            getMsg(6)

        })
    </script>

</html>

Data format: business.json

{
    "list": [
        {
            "img":"img/dingwei.png",
            "manager": "New store opens, brush and present gifts"
            
        }, {
            "img": "img/dingwei.png",
            "manager": "Wen Shi Lou 108"
            
        },
        {
            "img": "img/dingwei.png",
            "manager": "Wen Shi Lou 108"
            
        },
        {
            "img": "img/dingwei.png",
            "manager": "Wen Shi Lou 108"
            
        },
        
        {
            "img": "img/dingwei.png",
            "manager": "Wen Shi Lou 108"
            
        }
        
    ]
}

I'm the divider========
Original author: miss qiche, it's not easy to create. Please inform me that post-90s front-end girls love programming, operation and tossing.
Insist on summarizing the technical problems encountered in the work and recording what you think and see in the work. Welcome to discuss and exchange together.
There is a public cry that is hard to get up: official account.

Tags: JQuery JSON Javascript Programming

Posted on Wed, 01 Apr 2020 14:11:03 -0700 by GetPutDelete