Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use layui paging

2025-04-05 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report