<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>LayUI 数据表格模板 - Post 请求数据</title>
  <link rel='stylesheet' href='https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css'>
</head>
<body>
<table id='demo' lay-filter='test'></table>
<script src='https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdn.staticfile.org/layui/2.5.6/layui.min.js'></script>
<script>
  layui.use(['table'], function(){
    var table = layui.table;
    //第一个实例
    table.render({
      elem: '#demo'
      ,height: 500
      ,url: '/api/data' //数据接口,post方式请求
      ,method: 'post' //默认get请求
      ,page: true //开启分页
      ,cols: [[ //表头
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'username', title: '用户名', width:120}
        ,{field: 'email', title: '邮箱', minWidth: 150}
        ,{field: 'sex', title: '性别', width:80, sort: true}
        ,{field: 'city', title: '城市', width:100}
        ,{field: 'sign', title: '签名', minWidth: 200}
        ,{field: 'experience', title: '积分', width:80, sort: true}
        ,{field: 'score', title: '评分', width:80, sort: true}
        ,{field: 'classify', title: '职业', width:100}
        ,{field: 'wealth', title: '财富', width:135, sort: true}
      ]]
    });
  });
</script>
</body>
</html>

原文地址: https://www.cveoy.top/t/topic/ncpV 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录