<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:{}
}