How to use layui paging

This article mainly shows you "how to use layui paging", the content is simple and easy to understand, organized clearly, I hope to help you solve doubts, let Xiaobian lead you to study and learn "how to use layui paging" this article bar.

layui pagination official address: https://www.layui.com/doc/modules/laypage.html

The first step is to introduce layui css and js

Well, there's no need to demonstrate.

Step 2: Write styles in html

Step 3: Write the JS code

At present, it is simply to write paging style in js code

Theme is to customize the color of the page or add a class name to change the page style

Step 4: Ajax Control Pagination

Data to be transmitted in Ajax

Add jump to layui call

jump is to click on the previous page or the next page to trigger the function itself

if (! first) { }

The function of is to set the first rendering page without going through the business logic processing function, otherwise it will fall into an endless loop. When I first looked at it, I was also confused. How to achieve page jump How to get the current page, and then I printed the obj in the function and understood.

In obj, the total number of data items and the current page have been obtained. When clicking on the next page, curr will become 2. If the current page is 2, curr will become 1 when clicking on the previous page. Assign obj.curr to the defined current page variable as a parameter. See Step 4 Data to be passed in Ajax for details.

Finally, the paging is completed by calling the function of rendering the list again

That's all for "how to use layui pagination", thanks for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!