Let me show you the renderings first. If you feel the effect is good, please refer to the implementation code:
Because this is my first time writing paging in js, the writing should not be perfect. Some public ones are not extracted, but they are still OK to use. This code can be treated as a public paging. I used this code to write two slightly different paging! The common code extracts are similar, mainly because the ajax background and returned values are different. As long as the total page number is obtained and click on the home page/next page to pass the value correctly, basically there will be no problem with the pagination.
There are indeed many paging plug-ins and open source codes on the Internet. Single book is a backend development ape, and the frontend CSS and other styles are still uncontrollable, so I started writing it myself. In fact, the principle of paging is very simple. It is to use ajax to pass values (current page number) to the background, and use limit to paginate them in the background.
Without further ado, just upload the code!
Note: This project is written using js throughout the process. The front desk data is obtained through ajax, and then assembled and loaded to the page dynamically.
1. First attach the codes of the previous page, the next page, etc. (The values inside are all pseudo values, and the following will be reassigned in js!)
<ul id="page"><li id="shouye"><a href='javascript:indexpage(1);'>Home</a></li><li id="shangyiye" ><a href='javascript:indexpage(-1);'><i></i>Previous page</a></li><li><a id="one" href="javascript:void(0);" >1</a></li><li><a id="two" href="javascript:void(0);" >2</a></li><li><a id="three" href="javascript:void(0);" >2</a></li><li><a id="three" href="javascript:void(0);" >3</a></li><li><a id="five" href="javascript:void(0);" >...</a></li><li><a id="fore" href="javascript:void(0);" >13855</a></li><li class='p-next'><a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);">Next Page<i></i></a></li><li><li id="weiye" class='p-next'><a href='javascript:void(0);' onclick="indexpage(0);">Last page</a></li><li><span id="span_number">Total 13,855 pages to the <input type="text" id="input_number" /> page<input name="" value="identify" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);"/></span></li></ul>2. First put two hidden fields on the page, one is the current page number and the other is the total page number. The total page number is the page loaded and the value is directly attached after querying from the background. If there is no operation of the current page number, you must assign the value to the current page number.
<input id="jiazai" type="hidden" ></input><!-- Current page number--><input id="totalpage" type="hidden" ></input><!-- Total page number-->
3. Write a function that has been loaded on the page and assign values to the total page number and the current page number.
$(function(){$('#jiazai').val(1);// Assign the current page number, the default is ajaxfunction(page,arg,chipssort,'');//This method is the extracted ajax background access method});4. Extracted ajax method. This page will use this method several times, and all of it is collected because the data of the page is obtained from the background through ajax, and the background returns a List collection.
//The method of extracting ajax function ajaxfunction(page,arg,chipssort,fontval){$.ajax({type:'POST',url:'/admin/receptionchips/showlist',//The requested url address data:{page:page,sort:arg,chipssort:chipsort,fontval:fontval},dataType:'json',contentType:'application/x-www-form-urlencoded; charset=utf-8',success:function(data){//The method of returning the value for access and decimation is returned from the background, and commonfunction(data);}});}3. There are not many codes to see, the last one
//The method of extracting string spelling function commonfunction(data){$('#projectlist').find("li").remove();for (var i=0;i<data.length;i++ ){ /*****Because this page is loaded dynamically, it mainly performs string spelling, and there is a lot of code, so it does not leak out and take up space*****/<br> }<br> //The beginning is the core of pagination if(data.length>0){//Set page number var pading = data[0].padingnum;//Total page number $('#totalpage').val(pading);var page = $('#jiazai').val();//Current page $('#countpage').html("<b id='currentPageNo'>"+page+"</b>/"+pading+"");$('#span_number').html("Total"+pading+" page to <input type='text' id='input_number' class='page-txtbox' /> page<input name='' value='determined' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback);' class='page-btn'/>")}else{$('#countpage').html("<b id='currentPageNo'>"+0+"</b>/"+0+"");}//The bottom of the setting page is home page1 2 3 4 5 6 Last page var pading = data[0].padingnum;//Total page number href="javascript:void(0);"var nowpage = $('#jiazai').val();//Current page //one two three five fore<br> //The following code looks more troublesome, but it is not difficult to understand that it is all the same code, but it is just added some judgments if(nowpage<5 ){$('#one').text(1);$('#one').attr('href','javascript:pagenum("'+1+'");');$('#two').text(2);$('#two').attr('href','javascript:pagenum("'+(2)+'");');$('#three').text (3);$('#three').attr('href','javascript:pagenum("'+(3)+'");');$('#five').text(4);$('#five').attr('href','javascript:pagenum("'+(4)+'");');$('#fore').text(5);$('#fore').text(5);$('#fore'). e').attr('href','javascript:pagenum("'+(5)+'");');$('#five').parent().show();$('#fore').parent().show();}else{//alert("It's not the fifth page anymore");//Set the middle to the current page $('#one').text(Number(n owpage)-2);$('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'");');$('#two').text(Number(nowpage)-1);$('#two').attr('href','javascript:indexpage("' +(Number(nowpage)-1)+'");');$('#three').text(nowpage);$('#three').attr('href','javascript:indexpage("'+(nowpage)+'");');$('#five').parent().show();$('#fore').parent ().show();//Judge whether the next page exceeds the total number of pages if(Number(nowpage)+1>pading){$('#five').parent().hide();$('#fore').parent().hide();}else{$('#five').parent().show();$('#five').text(Number(n owpage)+1);$('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'");');}//Judge whether the second page of the next page exceeds the total number of pages if(Number(nowpage)+2>pading){$('#fore').parent().hide();}e lse{$('#fore').parent().show();$('#fore').text(Number(nowpage)+2);$('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'");');}}//If the total number of pages is less than 5, this code mainly sets 1 2 3 4 5 These show and hide if(pading==0){$('#one').parent().hide();$('#two').parent().hide();$('#three').parent().hide();$('#five').parent().hide();$('#fore').parent().hide();}else if(pading==1){$('#shouye').hide();$('#weiye').hide();$('#one').parent().hide();$('#two').parent().hide();$('#three').parent().hide();$('#five').parent().hide();$('#fore').parent().hide();}else if(pading==2){$('#one').parent().show();$('#two').parent().show();$('#three').parent().hide();$('#five').parent().hide();$('#fore').parent().hide();}else if(pading==3){$('#one').parent().show();$('#two').parent().show();$('#three').parent().show();$('#five').parent().hide();$('#fore').parent().hide();}else if(pading==4){$('#one').parent().show();$('#two').parent().show();$('#three').parent().show();$('#five').parent().show();$('#fore').parent().hide();}else{$('#one' ).parent().show();$('#two').parent().show();$('#three').parent().show();$('#five').parent().show();$('#fore').parent().show();}//Set highlighted that is, 1 is on the first page, and 2 is on the second page. a').each(function() {$(this).parent().removeClass("current");if($(this).text()==nowpage){$(this).parent().addClass("current");}});//Return to the top of the page after paging $("html,body").animate({scrollTop:0}, 500);// Finally, add 1$('#jiazai').val(Number(bianlaing)+Number(1)); }Okay, the page is completed here. If you need to use it, it may take a while to understand my code. In fact, the code is not difficult. I used it for two hours to write it. Just read it one line by one, and add comments yourself. Get this piece over, and it will definitely be done within half an hour!