The paging function implemented by jQuery, including ajax requests and background data, with a complete demo and jqueryajax

The paging function implemented by jQuery, including ajax requests and background data, with a complete demo and jqueryajax

I. Requirement Analysis

　　1) the home page and the last page are required.

2) Click to view the previous page and next page.

3) refresh the page from the page number to the last page of the current visible page number

Ii. Functional Implementation ideas

　　It is also divided into three parts for processing

　　1) Click the Home Page. The last page displays the content of the first or last page. The current page is 1st or the last page. Hide the home page or last page button. Demo display

Homepage status and last page status code execution result

　　

2) Click the visible page number.

　　

3) Click the previous page or next page. When you need to refresh the Page Status, yesterday the current page number is 7, and the right figure shows the status when you click the previous page.

　　

Iii. Code parameter description

<Script src = "js/jquery-1.8.3.min.js" type = "text/javascript"> </script> 2 <script src = "data/data. js "type =" text/javascript "> </script> 3 <script src =" js/sendAjax. js "type =" text/javascript "> </script> 4 <script src =" js/page. js "type =" text/javascript "> </script> 5 <script> 6/* initialization page */7 var initTotalPageNum = 11; 8 $ ("# ui-page "). paging ({pageSize: 5, totalPage: initTotalPageNum}); 9 </script>

In order to distinguish clearly, every file is written separately.

Data. js // The background data is simulated in json format.

SendAjax. js // The file that simulates ajax request background data

Page. js // is the encapsulated page number generation function

InitTotalPageNum // The total page number of the data imported in the simulated background

PageSize // custom parameter, which can be used to define the visible area code, current demo. When pageSize = 5 and initTotalPageNum = 3 are smaller than pageSize, the status is shown in

Iv. Code advantages and disadvantages

　　1) Using ajax can achieve partial refresh, but it is not conducive to seo

2) The generated page number does not change the dom structure. Only the page number is changed.

You can write your own requirements for the latest project. If you have time, it will be implemented using js.

Download pageAjax.zip from the complete demo if necessary.