jQuerylayui表格模糊查询详细代码

以下是一个基于jQuery和layui的表格模糊查询的示例代码：

HTML代码：

<div class="layui-form-item">
  <div class="layui-input-inline">
    <input type="text" name="search" placeholder="输入关键字" autocomplete="off" class="layui-input">
  </div>
  <div class="layui-input-inline">
    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">搜索</button>
  </div>
</div>
<table class="layui-hide" id="table" lay-filter="table"></table>

JS代码：

// 初始化表格
layui.use('table', function() {
  var table = layui.table;
  table.render({
    elem: '#table',
    url: '/api/data',
    page: true,
    cols: [
      [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: '姓名', width: 120 },
        { field: 'age', title: '年龄', width: 80 },
        { field: 'gender', title: '性别', width: 80 },
        { field: 'email', title: '邮箱', minWidth: 200 }
      ]
    ]
  });
  
  // 监听搜索按钮
  form.on('submit(search)', function(data){
    var keyword = data.field.search;
    table.reload('table', {
      where: { 
        search: keyword
      }
    });
    return false;
  });
});

后端API接口代码：

// 获取数据
$data = [
  ['id' => 1, 'name' => '张三', 'age' => 18, 'gender' => '男', 'email' => 'zhangsan@qq.com'],
  ['id' => 2, 'name' => '李四', 'age' => 20, 'gender' => '女', 'email' => 'lisi@qq.com'],
  ['id' => 3, 'name' => '王五', 'age' => 22, 'gender' => '男', 'email' => 'wangwu@qq.com'],
  ['id' => 4, 'name' => '赵六', 'age' => 24, 'gender' => '女', 'email' => 'zhaoliu@qq.com']
];

// 处理搜索参数
if(isset($_GET['search'])) {
  $keyword = $_GET['search'];
  $data = array_filter($data, function($item) use ($keyword) {
    return strpos($item['name'], $keyword) !== false 
      || strpos($item['email'], $keyword) !== false;
  });
}

// 返回数据
header('Content-Type: application/json');
echo json_encode([
  'code' => 0,
  'msg' => '',
  'count' => count($data),
  'data' => $data
]);

上述代码中，前端页面使用了layui的表格组件来展示数据，同时添加了一个搜索框和搜索按钮。当用户输入关键字并点击搜索按钮时，会向后端API接口发送请求并传递搜索参数。后端API接口会根据搜索参数过滤数据，并返回给前端页面展示。