JQuery DataTables Plug-in Custom Ajax paging instance resolution _jquery

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.