layui 数据表格 进行条件搜索
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>更正地址</
title
>
<
style
>
</
style
>
<
link
rel
=
"stylesheet"
href
=
"layui/css/layui.css"
>
<
script
src
=
"js/jquery-1.11.3.min.js"
></
script
>
<
script
src
=
"layui/layui.js"
></
script
>
</
head
>
<
body
>
<
div
class
=
"demoTable"
>
搜索商户:
<
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
=
"tablea"
lay-filter
=
"menu-filter"
></
table
>
<
script
>
layui.use('table', function() {
var table = layui.table;
//方法级渲染
table.render({
elem: '#tablea'
,url:'json/demo.json'
, cols: [[
{field:'id', title: 'ID', align: 'center',width:150}
,{field:'username', title: '公司名称', align: 'center',width:100}
]]
, id: 'testReload'
, page: true
, height: 600
,request: {
pageName: 'page' //页码的参数名称,默认:page
,limitName: 'pageSize' //每页数据量的参数名,默认:limit
,statusName:'status'//数据状态的字段名称,默认:code
,statusCode:200 //成功的状态码,默认:0
}
});
$('.layui-btn').click(function () {
var inputVal = $('.layui-input').val()
table.reload('testReload', {
// ,methods:"post"
,request: {
pageName: 'page' //页码的参数名称,默认:page
,limitName: 'pageSize' //每页数据量的参数名,默认:limit
}
,where: {
query : inputVal
}
,page: {
curr: 1
}
});
})
})
</
script
>
</
body
>
</
html
>