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

This article mainly shows you "how to use the paging function of layui", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the paging function of layui" this article.

Layui is a very practical front-end development library. Using it, we can easily and easily create various beautiful front-end UI.

Methods / steps

First, we need to introduce the script file and style file corresponding to lay.

In Html, we just need to create an empty div to generate the paging component and provide an id for the div.

In the js script code, our husband becomes a paging component instance object of laypage.

Then call the object's render method to render the paging elements.

In the render method, we pass in an object, and elem is the id of div.

Count is used to indicate how many pieces of data there are in a paged object.

Run this code, we can see the rendered page, very simple code, get a beautiful page.

As we can see from the above data, there are 10 pieces of data on a page by default.

Of course, we can also configure this, just provide the limit parameter, we set it to 4 here.

Refresh the page, you can see, 20 pieces of data, 4 rows of data per page, you can see that it is now divided into 5 pages.

In the paging control, a very important function is to interact, that is, after clicking on a page, you need to display the data of the corresponding page.

So the component provides a jump method to interact, in which a parameter obj is passed, and this obj allows us to get some commonly used data, such as obj.cur, which is the current page number.

Obj.limit can get the number of data contained in each page.

The above is all the contents of the article "how to use the paging function of layui". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.