Layui——table使用

demo效果

注意事项：请求的JSON字段的顺序要和表头field 名字顺序都要对应否则加载数据失败

相关文章

layui的table中显示图片方法

layui table表格带图片，图片显示不全问题

如果要修改tabel的样式直接添加到style 就行eg:

/*隐藏table分页点击跳转按钮*/
        .layui-laypage-skip button{
            display: none;
        }

// console.log(table.checkStatus(\'test\').data); // 获取表格中选中行的数据

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  </head>
  <body>
  <div class="demoTable">
    搜索ID：
    <div class="layui-inline">
      <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
  </div>
    <table class="layui-hide" id="test"></table>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!--您的Layui代码start-->
    <script type="text/javascript">
    layui.use([\'laydate\', \'laypage\', \'layer\', \'table\', \'carousel\', \'upload\', \'element\'], function() {
      var laydate = layui.laydate //日期
      ,laypage = layui.laypage //分页
      ,layer = layui.layer //弹层
      ,table = layui.table //表格

        table.render({
            elem: \'#test\'
            ,url:\'a.php\'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
              layout: [\'limit\', \'count\', \'prev\', \'page\', \'next\', \'skip\'] //自定义分页布局
              //,curr: 5 //设定初始在第 5 页
              ,groups: 1 //只显示 1 个连续页码
              ,first: false //不显示首页
              ,last: false //不显示尾页
            }
            ,cols: [[
              {field:\'id\', width:100, title: \'ID\', sort: true}
              ,{field:\'username\', width:100, title: \'用户名\',sort: true}
          ]]
          // 响应的数据
          ,parseData: function(res){ //res 即为原始返回的数据
            return {
              "code": res.code, //解析接口状态
              "count": res.count, //解析接口总数
              "data": res.data //解析数据列表
            };
          }
          //请求的参数
          ,request: {
            pageName: \'page\' //页码的参数名称，默认：page
            ,limitName: \'limit\' //每页数据量的参数名，默认：limit
          }
         ,done: function () {
            // $(\'.layui-table .layui-table-cell > span\').css({\'font-weight\': \'bold\'});//表头字体样式

            /*$(\'th\').css({\'background-color\': \'#5792c6\', \'color\': \'#fff\',\'font-weight\':\'bold\'}) 表头的样式 */

            // $(\'th\').hide();//表头隐藏的样式

            // $(\'.layui-table-page\').css(\'margin-top\',\'40px\');//页码部分的高度调整
          }

        });
      // 数据重载
      var $ = layui.$, active = {
        reload: function(){
          var demoReload = $(\'#demoReload\');

          //执行重载
          table.reload(\'test\', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
                id: demoReload.val()
            }
          }, \'data\');
        }
      };

      $(\'.demoTable .layui-btn\').on(\'click\', function(){
        var type = $(this).data(\'type\');
        active[type] ? active[type].call(this) : \'\';
      });

    });
    </script>
  </body>
</html>

<?php
// 搜索
if(isset($_REQUEST[\'id\']) && !empty($_REQUEST[\'id\'])){
    $result = [
        \'code\'=>0,
        \'count\'=>100,
        \'data\'=>[
            [
                \'id\'=>1,
                \'username\'=>111,
            ],
            [
                \'id\'=>1,
                \'username\'=>111,
            ],

        ]

    ];
}else{
    $result = [
        \'code\'=>0,
        \'count\'=>100,
        \'data\'=>[
            [
                \'id\'=>1,
                \'username\'=>111,
            ],
            [
                \'id\'=>2,
                \'username\'=>222,
            ],
            [
                \'id\'=>3,
                \'username\'=>333,
            ],
        ]

    ];
}

echo json_encode($result,JSON_UNESCAPED_UNICODE);  //JSON_UNESCAPED_UNICODE防止中文乱码