A, description,
When I first joined the front-end family, paging was a mountain of obstacles for me, so if you don’t have a lot of experience with JavaScript or jQuery, I recommend you get used to these two parts before reading this article, otherwise you will feel very uncomfortable. Learning is a gradual process. Don’t be hasty. If you are an experienced programmer, I hope this article can give you another way to think about it. If you have any problems, please feel free to give me some advice.
Second, the implementation
This is the style we want to implement, if the current page >= 6, we want to leave 1 or 2 pages to the left of the page and add… . In order to understand the implementation of paging in the front end, the following interface has no parameter to set the number of pages to be displayed per page. The default is to display 2 pages per page.
// Load data. This function is used to: 1) Initialize the page; 2) Call when the page is paged. Now you can think of it as page initialization. $.ajax({url: "{:url(' ArticleList/GetArticles ')}? CurrentId =" + currentId, type: "get", dataType: 'json', success: function (res) {// The paginatFactory function is the core of the rendered page, which will be covered 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, previou is the page number of the previous page, and total is the number of the total page. Here, maybe the data structure returned by the background is different from yours. It is suggested that you communicate with the background and ask them to add the required parameters. (This rules out the possibility that you have a problem with the backstage.)
Now the core pagination function pagInAtFactory (Res, currentId), Res is the data above, currentId is the current page.
function paginatFactory(res, currentId) { var html = ""; // The HTML variable stores the content to be displayed. The following loop will not be repeated. for (var i = 0; i < res.data.length; i++) { var category = res.data[i].category === 0 ? "Res.data [I]. Category === = 1? "Front-end article" : "travel miscellaneous "; 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 - the 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 to the body to see the effect. // Create a ul tag with class paginate after the id of the articlelist table. // The disabled page number cannot be clicked, if the current page is the first page, the « button cannot be clicked var pageHTML = "<li "+ (res.previou? "" : "Disabled ") +" data-pageid='" + res.previou + "'>«</li>"; //pageTotal to set the number of pages displayed, up to 6 if >=6, Var pageTotal = res.total >= 6? Res. total; // Since there are two styles, If (currentId < 6) {for (var j = 1; j <= pageTotal; j++) {pageHTML += "<li" + (currentId === j? "disabled" : "") +" data - pageid = '" + j + "' > "+ j +" < / li > ";}} else {/ / if more than 6, For (var j = 1; j <= pageTotal; j++) {if (j < 3) {pageHtml += "<li" +) {if (j < 3) {pageHtml += "<li" +) (currentId === j ? "disabled" : "") +" data - pageid = '" + j + "' > "+ j +" < / li > ";} / / equals 3, If (j === 3) {pageHTML += "<li disabled class='jump'>...</li>";} // The current page is -1, if the current page is 7, If (currentId === res.total) {pageHTML += "<li data-pageid='" + (currentId - 2) + "'>" + (currentId - 2) + "</li>"; } pageHtml += "<li data-pageid='" + (currentId - 1) + "'>" + (currentId - 1) + "</li>"; } // The current page, notice disabled, cannot be clicked, If (j === 5) {pageHTML += "<li disabled data-pageid='" + currentId + "' bb0 "+ currentId + "</li>";} If (j === 6 &¤tId < res.total) {pageHTML += "<li data-pageID ='" "+ (currentId + 1) +" >" + (currentId + 2 1) + "</li>";}} // If the current page is less than the second to last page of the total, If (j === 6 && currentId < (res.total-1)) {pageHTML += "<li disabled class='jump'>...</li>";}} } // Here is the disabled page HTML += "<li" + (currentId >= res.total? "disabled" : PageHtml += "<li class='jump' disabled> total "+ res.total +" pageHtml += "<li class='jump' disabled> total "+ res.total + "Page. <input class='entrance' value='" + currentId + "' type='text' </li><li data-total='" "+ res.total + "' $('.paginate').html(pageHtml);} How to call loadData(1); On ('click', '. Paginate li:not([disabled])', Function () {//confirm if ($(this).hasClass('confirm')) {//confirm if ($(this).hasClass('confirm')); For input is what page. Var page = parseInt ($(' entrance '). The val ()); the if (page < = 0 | | page > $(this). The data (the 'total') | | isNaN (page)) { Layer.msg (' Please enter the correct page number! ');} else {// Invoke the Ajax method after the correct page number is matched. LoadData (page);}} else {// This is the call after the page number is clicked $(this).data('pageid'); loadData(pageId); } });The CSS styles are 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;
}