So aktualisieren Sie Laui-Tabellen automatisch

Schritt eins: Umgebung einrichten.

1. Die Umgebung von Layui ist sehr einfach einzurichten, ähnlich wie bei der Abfrage. Es kann direkt verwendet werden, solange es importiert wird.

1.1: JS und Stile einführen

2. Wenn Sie am Tag davor und danach eine vollständige interaktive Anfrage stellen, müssen Sie eine reaktionsfähige Hintergrundumgebung erstellen. (In diesem Artikel wird nicht der Aufbau der Hintergrundumgebung vorgestellt.)

Schritt 2: Laden Sie Laui herunter.

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

1. Der erste Schritt besteht darin, die Laui-Download-URL zu öffnen

2 Paket von Laui

3. Abhängigkeitspakete anzeigen.

Verwandte Empfehlungen: „Layui-Framework-Tutorial“

Schritt 3: Code-Implementierung.

1. Implementierung des HTML-Codeteils

<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. Die Schaltfläche

<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;}
    ]]
  });

oder js wird regelmäßig aufgerufen, und die Abfrageschaltfläche ruft

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

Schritt 4: Testen auf.

1. Die Seitendatentabelle wird erfolgreich geöffnet und angezeigt.

2. Klicken Sie auf die Seitenzahl der Umblättertaste, um die Tabelle zu aktualisieren

3. Rufen Sie Laui auf, um die Seite zu aktualisieren.

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie Laui-Tabellen automatisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!