layui模糊查询表格分页写法

在 layui 中，模糊查询表格分页的写法可以参考以下步骤：

1. 定义表格的 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 代码，定义表格列的数据和分页等参数。

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 代码中添加模糊查询的响应事件，根据用户输入的关键字进行查询，并重新加载表格数据。

<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 的分页组件，用于实现表格分页。