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

This article will explain in detail how to load tips for layui when initializing the table. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Layui's table can be initialized with a friendly prompt to enhance the user experience. Examples are as follows:

Layui.use (['form',' layer', 'table'], function () {var form = layui.form, table = layui.table; / / load prompt var loadingMsg = layer.msg (' data request...', {icon: 16, shade: [0.5], scrollbar: false, time: 0}) / / initialization table and data var tableIns = table.render ({elem:'# tableList', url: 'user/list', / / data request address where: {userName: $("# userName"). Val ()}, cellMinWidth: 95, toolbar: "# toolbarDemo" / / display the default built-in template defaultToolbar on the left side of the toolbar: ['filter'], / / the icon button on the right side of the toolbar [' filter', 'print',' exports'] even: true, / / turn on the zebra crossing effect page: true, / / height: "full-125", / / place it at the bottom of the page limits: myLimits Limit: myLimit, id: "tableListTable", cols: [{type:'numbers', title: 'serial number'}, {type:'radio', title: 'radio'}, {field: 'userId', title:' ID', width:100, align: "center", hide: true}, {field: 'userName' Title: 'username', minWidth:150, align: "center"}, {field: 'remark', title:' remarks, align: "center"}]], done: function (res, curr, count) {/ * * callback of data rendering * / / close prompt layer layer.close (loadingMsg) }))

The prompt message will be turned off when the data can be requested normally and the result is returned, but when the data request is abnormal (such as an address error), the prompt message will always be displayed. At this time, we need to modify the layui\ lay\ modules\ table.js source code, find "i.errorView (" data API request exception: "+ t)", and add the following information to the front to close the prompt message if the data request fails:

Layer.close (layer.index); / * * close the latest pop-up layer loadingMsg * /

On "layui how to achieve table initialization tips for loading information" this article is shared here, 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 out 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.