I. Description of the problem
The park friend is the front-end, the product manager asked him to use the jquery DataTables plugin to display a list, to achieve the classification effect.
The back-end paging interface has been written, does not involve conditional queries, requires incoming page numbers (PageNo) and page display data bars (pageSize), displays the corresponding page display records, and cannot modify the backend interface.
Second, analysis
First to analyze the next paging implementation.
one is back-end paging: In this case, the backend is easy to implement, there are examples on the official web, not many instructions.
The second is the front-end paging: front-end paging is also supported, but need to get all the data at once to be able to.
See here, the problem comes. Because the backend is not changed in the current situation, it can only be implemented on the front-end. However, you are now not satisfied with the front page paging condition :
Get all the data at once (now the back-end data interface can only return data for the page number).
In the current situation, the data gets only one page, not all the page numbers.
Try to disguise the back-end paging, which is to open the back-end pagination, before the request, the incoming data is reorganized, after obtaining the data, the returned data is assembled in the back-end pagination data format.
After testing, it is possible.
Third, realize
Implemented through the DataTables configuration parameter Ajax entry. For more information on Ajax please see official instructions: Chinese | English
Ajax receives three kinds of parameters:
*string: Set URL to get data
*object: Similar to the JQUERY.AJAX definition
*function: Customizing the ability to get data
Go directly to the code, all with comments.
Front page code:
JSON data format:
Effect Chart:
Wonderful feature sharing:jquery Paging functionality operations JavaScript paging functionality
This article is introduced here, I hope to help you learn.