Front end Ajax to achieve pagination ideas

Time:2021-5-6

1、 Explanation

When I first joined the front-end family, pagination was definitely a mountain of obstacles for me, so if you don’t have some practical experience with JavaScript or jQuery, I suggest you get familiar with these two parts first, and then look at the article here, otherwise you will feel very uncomfortable. Learning is a step-by-step process. Don’t be impatient; In addition, the author knows that there are people outside, there is a day outside, if you are a veteran programmer, I hope this article can give you another way of thinking, if there are shortcomings, please give me your advice.

2、 Implementation

Front end Ajax to achieve pagination ideas
Front end Ajax to achieve pagination ideas

This is the style we want to implement. If the current page > = 6, we need to keep 1 or 2 pages on the left side of the page and add. In order to understand the implementation of pagination in the front end, the following interface does not have parameters to set the size of the number of displays per page. By default, there are 2 displays per page.

//Load data, this function role: 1, page initialization rendering, 2, click paging call. Now you can understand it for page initialization.
//What is the current page of currentid
            function loadData(currentId) {
                $.ajax({
                    url: "{:url('articlelist/getArticles')}?currentId=" + currentId,
                    type: "get",
                    dataType: 'json',
                    success: function (res) {
//The paginatfactory function is the core of rendering pages, which will be introduced later.
                        paginatFactory(res, currentId);
                    }, error: function (res) {
                        console.log(res);
                    }
                })
            }

The structure of the data returned by the interface is as follows. Data is the data array, next is the page number of the next page, preview is the page number of the previous page, and total is the total number of pages. Here, the data structure returned by the background may be different from yours. I suggest you communicate with the background and ask them to add the required parameters( Here you and the backstage are excluded
Front end Ajax to achieve pagination ideas

The following is paginatfactory (RES, currentid), the core function of pagination. Res is the above data, and currentid is the current page.

function paginatFactory(res, currentId) { 
                var html = "";    // The HTML variable stores the content to be displayed, which will not be repeated in the following loop.
                for (var i = 0; i < res.data.length; i++) {
                    var category = res.data[i].category === 0 ? " Design article ": res.data [i]. Category = = = 1?" The front-end article is "travel miscellany";
                    html += " <tr>" +
                        "                    <td>" + res.data[i].title + "</td>" +
                        "                    <td>" + res.data[i].content + "</td>" +
                        "                    <td>" + category +
                        "                    </td>" +
                        "                    <td>" +
                        "                        <a class=\"layui-btn layui-btn-normal\" href=\"{:url('articlelist/edit')}? Id = + res.data [i]. ID + "\" > Edit < / a > "+
                        "< div class = \" layui BTN layui BTN warm removearticle \ "data id = \" + res.data [i]. ID + "\" > delete < / div > "+
                        "                    </td>" +
                        "                </tr>";
                }
                $('#articlelist').html(html);    // Please add a table tag with ID // articlelist in the body to see the effect.
 
                //This is the core of pagination. In order to better view the effect, please create a UL tag with class paginate after the table with ID as articlelist just now.
//If the current page is the first page, you can't click it, « The button can't be pressed
                var pageHtml = "<li " + (res.previou ? "" : "disabled") + " data-pageid='" + res.previou + "'>«</li>";
//Pagetotal to set the number of pagination display. If > = 6, the maximum number of pagination display is 6. Otherwise, you can understand
                var pageTotal = res.total >= 6 ? 6 : res.total;
            //Because there are two styles, it is changed according to the current page
                if (currentId < 6) {
                    for (var j = 1; j <= pageTotal; j++) {
                        pageHtml += "            <li " + (currentId === j ? "disabled" : "") + " data-pageid='" + j + "'>" + j + "</li>";
                    }
                } else {
            //If it's greater than 6, it'll add... And leave pages 1 and 2 on the left
                    for (var j = 1; j <= pageTotal; j++) {
            //If it is less than 3, page 1 and page 2 always exist
                        if (j < 3) {
                            pageHtml += "            <li " + (currentId === j ? "disabled" : "") + " data-pageid='" + j + "'>" + j + "</li>";
                        }
            //It's three plus
                        if (j === 3) {
                            pageHtml += "<li disabled class='jump'>...</li>";
                        }
            //If the current page is greater than three. Page numbers need to be rendered based on the current page.
                        if (currentId > 3) {
            //If the current page is 7, 7-1 = 6 will be displayed on the left
                            if (j === 4) {
                                if (currentId === res.total) {
                                    pageHtml += "<li data-pageid='" + (currentId - 2) + "'>" + (currentId - 2) + "</li>";
                                }
                                pageHtml += "<li data-pageid='" + (currentId - 1) + "'>" + (currentId - 1) + "</li>";
                            }
            //On the current page, please note that it is disabled and cannot be clicked,
                            if (j === 5) {
                                pageHtml += "<li disabled data-pageid='" + currentId + "'>" + currentId + "</li>";
                            }
            //Here is the current page + 1, you should understand.
                            if (j === 6 && currentId < res.total) {
                                pageHtml += "<li data-pageid='" + (currentId + 1) + "'>" + (currentId + 1) + "</li>";
                            }
                        }
            //Here, if the current page is less than the penultimate page of the total number of pages. Otherwise, the following pages will not be displayed.
                        if (j === 6 && currentId < (res.total - 1)) {
                            pageHtml += "<li disabled class='jump'>...</li>";
                        }
                    }
                }
            //This is the last page. It is disabled
                pageHtml += "            <li " + (currentId >= res.total ? "disabled" : "") + " data-pageid='" + res.next + "'>»</li>";
            //Here is the page Jump.
                Pagehtml + = < Li class ='jump 'disabled > of "+ res.total +" pages, go to < input class ='entry' value = '"+ currentid +"'type =' > page < / Li > < Li data total = '"+ res.total +"'class ='confirm' > < / Li > "
            //Final rendering
                $('.paginate').html(pageHtml);
            }

Here's how to call

            loadData(1);//  When initializing the first rendering of a page, it is equivalent to obtaining the data of the first page, so pass 1 here
            /* 
            @Current ID current pages
             */
            $(document).on('click', '.paginate li:not([disabled])', function () {
            //Confirm determines whether you are clicking OK or page number
                if ($(this).hasClass('confirm')) {
                    //Are you sure? What page do you want to get the input.
                    var page = parseInt($('.entrance').val());
                    if (page <= 0 || page > $(this).data('total') || isNaN(page)) {
                        Layer.msg ('Please enter correct page number ');
                    } else {
                    // following the correct number of pages, call the Ajax method.
                        loadData(page);
                    }
                } else {
                    //Here is the call after clicking the page number.
                    var pageId = $(this).data('pageid');
                    loadData(pageId);
                }
            });

The CSS style is as follows

        .paginate {
            font-size:0;
        }
        .paginate li{
            font-size:14px;
            display: inline-block;
            margin-right:10px;
            text-align: center;
            width:30px;
            height:28px;
            line-height: 28px;
            border:1px solid #ddd;
        }
        .paginate [disabled]{
            color:gray;
        }
        .paginate li:not([disabled]):hover {
            cursor: pointer;
            color:#fff;
            background-color: #009688;
        }
        .paginate li.jump{
            border:none;
            width:auto;
        }
        .paginate li.jump .entrance{
            border:1px solid #ddd;
            text-align: center;
            width:30px;
            height:28px;
        }

Recommended Today

The use of springboot Ajax

Ajax overview What is Ajax? data Ajax application scenarios? project Commodity system. Evaluation system. Map system. ….. Ajax can only send and retrieve the necessary data to the server, and use JavaScript to process the response from the server on the client side. data But Ajax technology also has disadvantages, the biggest disadvantage is that […]