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

This article will explain in detail how to refresh the layui table automatically. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Step one: build the environment.

1. The environment of layui is very simple, similar to that of query. As long as it is introduced, it can be used directly.

1.1Introducing js and style

2. If you make a complete front-and-back interactive request, you need to build a background environment for the response. (the construction of the background environment is not introduced this time)

Step 2: download layui.

Web site: https://www.layui.com/

1. The first step is to open the layui download URL

2. Download the dependency package of layui

3. View the dependency package.

Related recommendation: "layui Framework tutorial"

Step 3: code implementation.

1. The implementation of html code.

Personnel data viewing, editing and deletion

2. The implementation of js code.

Layui.config ({version: '1545041465443' / / to update the js cache, negligible}) Layui.use (['laydate',' laypage', 'table',' element'], function () {var laydate = layui.laydate / / date, laypage = layui.laypage / / paging, table = layui.table / / table, element = layui.element / / element operation / / default first initialization call executes a table instance var tableIns = table.render ({elem:'# demo', height: 450 Url:'demo.json' / / data interface, title: 'user Table', page: true / / enable paging, toolbar: 'default' / / Open Toolbar The default icon is displayed here, and you can customize the template. For details, see the document, totalRow: true / / Open the total line, cols: [/ / header {type: 'checkbox', fixed:' left'}, {field: 'id', title:' ID', width:80, sort: true, fixed: 'left'}, {field:' username', title: 'dish name', width:105}, {field: 'sex', title:' menu category' Width: 105,105, sort: true}, {field: 'city', title:' cuisine, width:115, sort: true}, {field: 'sign', title:' signature', width: 80, sort: true, totalRow: true}, {field: 'experience', title:' points', width: 85, sort: true, totalRow: true}, {field: 'score', title:' score, width: 100} {field: 'classify', title:' occupation', width: 100}, {field: 'wealth', title:' wealth', width: 100}, {fixed: 'right', width: 165, align:'center', toolbar:' # barDemo'}]]})

Button or js is called regularly, and query button is called

Function callBack () {/ / second call to tableIns.reload ({where: {'username': "user-0"} / set extra parameters of asynchronous data interface, any setting, page: {curr: 1 / / restart from page 1}});}})

Step 4: test.

1. Open the page and display the data table successfully.

2. Click the page number of the page flip button to refresh the table

3. Request to refresh the page by calling layui.

This is the end of the article on "how to automatically refresh the layui form". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.