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

Editor to share with you how the layui framework to achieve paging settings, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

The specific steps are as follows:

1. Copy from the official document-built-in module-data table as follows:

2. Copy to the page and change the CSS address and JS address to your local address.

3. When the browser runs, it will appear as follows

4. Prompt data API request exception found: error.

Resolve:

1.1 modify the url request address in the code to your own address

1.2 modify the cols parameter to the parameter returned by your own API address

5. Then go to the browser to continue the scope and still report an error as follows:

6. In view of the problem, the format of the data returned by the interface is incorrect.

Then we go to the manual to see the interface data return format.

Details: official documents-built-in modules-data tables-returned data

7. The format of the returned data is as follows, and the code returned on success should be 0.

{"code": 0, "msg": "", "count": 1000, "data": [{}, {}, {}]} 8. After changing the return format of your API and going to the browser again, the following results will indicate that the format of the interface and the returned data are correct.

9. In this piece, in the results you see, there is the effect of paging, and which piece of code affects it? You'll find a piece of code in the js code: page:true / / turns on paging. However, there are still problems and the paging data displayed is incorrect. Solution: copy the following code, write it in your own code, and assign the data returned by the API to the corresponding parameters. The specific operations are as follows:

Operation: example-component example-data table-parsing any data format-View Code-parseData

10. When we run it again, we will find that the limit number written by ourselves does not work, and then if we look at the request address again, we will find that it is operated through get request, fixed parameters page and limit, and the default value is given.

Page:1,limit:10,11, how to change it to a post request? You only need to specify the request method post

Operation: official document-built-in module-data table-asynchronous data interface-method

12. Run and view the request as follows:

13. The name of the request parameter is already known to be page. How can limit be changed to the parameter name we want?

Operation: official document-built-in module-data table-asynchronous data interface-request code:

Request: {pageName: 'page', / / the parameter name of the page number. Default: page limitName:' size' / / the parameter name of the amount of data per page. Default: limit} 14. Run, view the request parameters as follows:

15. Change the default number of entries per page

How to change the default number of entries on the home page to what you want? How to change the number of entries per page that the browser displays by default to what you want? Operation: official document-built-in module-data table-basic parameter list-limit, limits code modification:

Limit:3,limits: [2Jing 3Jing 5], 16. Run and view the request parameters as follows:

17. The final html code is as follows:

The table module quickly uses layui.use ('table', function () {var table = layui.table) / / the first instance table.render ({elem:'# demo', url: 'http://localhost/php/public/index.php/index/index/index' / / data interface, method:' post', page: true / / enable paging Limit: 3, limits: [2,3,5], cols: [{width: 80, type: 'checkbox'}, {field:' type_id', width: 80, title: 'ID', sort: true}, {field:' type_name', title: 'taxonomic name' Sort: true}]], parseData: function (res) {/ / parse the original data into the data specified by the table component return {"code": res.code, / / parse the interface status "msg": res.msg / / parsing prompt text "count": res.data.total, / / parsing data length "data": res.data.data / / parsing data list} }, request: {pageName: 'page' / / parameter name of page number, default: page, limitName:' size' / / parameter name of data volume per page, default: limit},});}) 18. The TP5.0 used for the API does not use the model layer. The specific simple code is as follows:

The above is all the content of the article "how to achieve paging settings in layui Framework". 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.