天天看點

layui顯示資料表格和搜尋

<div style="text-align: center" id='btn'>
    <div class="layui-inline">
        <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜尋</button>
</div>
	<table class="layui-hide" id="test"></table>
           
<script>

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,url:'/getdata.php'
    ,cellMinWidth: 80 //全局定義正常單元格的最小寬度,layui 2.2.1 新增
    ,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:80, title: 'ID', sort: true}
      ,{field:'columnname', width:80, title: '字段名'}
      ,{field:'descriptionCN', width:80, title: '中文描述', sort: true}
      ,{field:'name', width:80, title: '名稱'}
      ,{field:'description_table', title: '表描述', width: '30%', minWidth: 100} //minWidth:局部定義目前單元格的最小寬度,layui 2.2.1 新增
      ,{field:'description', title: '字段類型', sort: true}
      ,{field:'primaryKey', title: '主鍵', sort: true}
      ,{field:'class', width:137, title: '分類', sort: true}
    ]]
  });
  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');
      
      //執行重載
      table.reload('test', {
        page: {
          curr: 1 //重新從第 1 頁開始
        }
        ,where: {
          keyword:  demoReload.val()
        }
      });
    }
  };
  
  $('#btn .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });


});
</script>
           

引用樣式和js,這是必須的。

背景傳回資料格式

{
	"code": 0,
	"msg": "",
	"count": 4,
        "data:{}
}