Home  >  Article  >  Web Front-end  >  How to automatically refresh layui tables

How to automatically refresh layui tables

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼Original
2019-07-11 16:49:4715733browse

How to automatically refresh layui tables

Step one: Set up the environment.

1. The environment setup of layui is very simple, similar to query. It can be used directly as long as it is imported.

1.1: Introduce js and styles

2. If you make a complete interactive request the day before and after, you need to build a responsive background environment. (This article does not introduce the construction of the background environment)

How to automatically refresh layui tablesHow to automatically refresh layui tables

Step 2: Download layui.

Website: https://www.layui.com/

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

2. Download the layui dependency package

3. Check the dependency packages.

How to automatically refresh layui tables

How to automatically refresh layui tables

How to automatically refresh layui tables

Related recommendations: "layui Framework Tutorial"

Step 3: Code implementation.

1. Implementation of html code part

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>人员数据</legend>
</fieldset>
<table class="layui-hide" id="demo" lay-filter="pManageTable"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

2. Implementation of js code.

<script src="layui/layui.all.js" charset="utf-8"></script>
<script>
layui.config({
  version: &#39;1545041465443&#39; //为了更新 js 缓存,可忽略
});
 
layui.use([&#39;laydate&#39;, &#39;laypage&#39;, &#39;table&#39;, &#39;element&#39;], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,table = layui.table //表格
  ,element = layui.element //元素操作
  
  //默认第一次初始化调用执行一个 table 实例
  var tableIns = table.render({
    elem: &#39;#demo&#39;
    ,height: 450
    ,url:&#39;demo.json&#39; //数据接口
    ,title: &#39;用户表&#39;
    ,page: true //开启分页
    ,toolbar: &#39;default&#39; //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: &#39;checkbox&#39;, fixed: &#39;left&#39;}
      ,{field: &#39;id&#39;, title: &#39;ID&#39;, width:80, sort: true, fixed: &#39;left&#39;}
      ,{field: &#39;username&#39;, title: &#39;菜品名称&#39;, width:105}
      ,{field: &#39;sex&#39;, title: &#39;菜单类别&#39;, width: 105, sort: true}
      ,{field: &#39;city&#39;, title: &#39;所属菜系&#39;, width:115, sort: true}
      ,{field: &#39;sign&#39;, title: &#39;签名&#39;, width: 80, sort: true, totalRow: true}
      ,{field: &#39;experience&#39;, title: &#39;积分&#39;, width: 85, sort: true, totalRow: true}
      ,{field: &#39;score&#39;, title: &#39;评分&#39;, width: 100}
      ,{field: &#39;classify&#39;, title: &#39;职业&#39;, width: 100}
      ,{field: &#39;wealth&#39;, title: &#39;财富&#39;, width: 100}
      ,{fixed: &#39;right&#39;, width: 165, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}
    ]]
  });

The button or js is called regularly, and the query button is called

  function callBack(){
  //第二次调用
 tableIns.reload({
    where: {&#39;username&#39;:"user-0"}/设定异步数据接口的额外参数,任意设
    ,page: {
      curr: 1 //重新从第 1 页开始
    }
 });
  }
  
  
});

How to automatically refresh layui tablesHow to automatically refresh layui tablesHow to automatically refresh layui tables

Step 4: Test.

1. Open the page data table and display successfully.

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

3. Call layui's request to refresh the page.

How to automatically refresh layui tables

How to automatically refresh layui tables

The above is the detailed content of How to automatically refresh layui tables. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn