在
layui 中，模糊查询
表格分页的
写法可以参考以下步骤：
1. 定义
表格的 HTML 结构，包括表头和表体。
```html
<table class="
layui-table" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'username', width:120}">用户名</th>
<th lay-data="{field:'email', width:200}">邮箱</th>
<th lay-data="{field:'sex', width:80}">性别</th>
<th lay-data="{field:'city', width:120}">城市</th>
<th lay-data="{field:'sign', width:200}">签名</th>
<th lay-data="{field:'experience', width:100, sort:true}">积分</th>
<th lay-data="{field:'score', width:100, sort:true}">评分</th>
<th lay-data="{field:'classify', width:100}">职业</th>
<th lay-data="{field:'wealth', width:150, sort:true}">财富</th>
</tr>
</thead>
<tbody>
<!-- 表体内容 -->
</tbody>
</table>
```
2. 初始化
表格的 JavaScript 代码，定义
表格列的
数据和分页等参数。
```javascript
layui.use(['table', 'laypage'], function(){
var table =
layui.table;
var laypage =
layui.laypage;
//
数据列
var data = [
{id:1, username:'张三', email:'zhangsan@example.com', sex:'男', city:'北京', sign:'我是张三，很高兴认识你！', experience:100, score:80, classify:'工程师', wealth:100000},
{id:2, username:'李四', email:'lisi@example.com', sex:'女', city:'上海', sign:'我是李四，很高兴认识你！', experience:80, score:90, classify:'设计师', wealth:80000},
// ...
];
// 初始化
表格
table.render({
elem: '#test',
data: data,
page: true,
limit: 10,
cols: [[
{field:'id', width:80, title: 'ID'},
{field:'username', width:120, title: '用户名'},
{field:'email', width:200, title: '邮箱'},
{field:'sex', width:80, title: '性别'},
{field:'city', width:120, title: '城市'},
{field:'sign', width:200, title: '签名'},
{field:'experience', width:100, title: '积分', sort:true},
{field:'score', width:100, title: '评分', sort:true},
{field:'classify', width:100, title: '职业'},
{field:'wealth', width:150, title: '财富', sort:true}
]]
});
// 模糊查询
$('#searchBtn').on('click', function(){
var keyword = $('#searchInput').val();
table.reload('test', {
where: {
keyword: keyword
},
page: {
curr: 1
}
});
});
});
```
3. 在 JavaScript 代码中添加模糊查询的响应事件，根据用户输入的关键字进行查询，并重新加载
表格数据。
```html
<div class="
layui-form-item">
<div class="
layui-input-inline">
<input id="searchInput" class="
layui-input" type="text" placeholder="请输入关键字">
</div>
<button id="searchBtn" class="
layui-btn">查询</button>
</div>
```
以上就是
layui 模糊查询
表格分页的
写法。其中，`table.render` 方法用于初始化
表格，`table.reload` 方法用于重新加载
表格数据，`laypage` 是
layui 的分页组件，用于实现
表格分页。
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
