- 一、需知
- 二、html代码
一、需知
这是为了演示前端模拟查询返回数据；请将参数传输到后台，并在后台分页返回数据。
- 重载表格的方式:请参考我之前写的这篇文章:Layui表格刷新(重载)
userTable.reload({ //url ajax要求后台接口重载 where: field, page: {curr: 1} }); - 默认页面
- 检索结果
二、html代码
<!DOCTYPE html> <html> <head> <title>Layui table实现数据表列表搜索功能</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" v="2.5.6" e="layui"/> </head> <body> <div class="layui-form layui-card-header layuiadmin-card-header-auto"> <div class="layui-inline w100"> <select name="status"> <option value="">审核状态</option> <option value="0">待审核</option> <option value="1">已通过</option> <option value="2">已驳回</option> </select> </div> <div class="layui-inline"> <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> <div class="layui-inline"> <input type="text" name="start_experience" placeholder="积分大于等于" autocomplete="off" class="layui-input"> </div> - <div class="layui-inline"> <input type="text" name="end_experience" placeholder="积分小于等于" autocomplete="off" class="layui-input"> </div> <div class="layui-inline"> <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="demo-search"> <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> </button> </div> </div> <table id="demo" lay-filter="demo"></table> <script type="text/html" id="statusTemplet"> {
{
# if(d.status == 1) {
}} <button class="layui-btn layui-btn-xs">已通过</button> {
{
# } else if (d.status == 2) {
}} <button class="layui-btn layui-btn-danger layui-btn-xs">已驳回</button> {
{
# } else {
}} <button class="layui-btn layui-btn-primary layui-btn-xs">待审核</button> {
{
# } }} </script> </body> <script src="https://www.layuicdn.com/layui/layui.js" v="2.5.6" e="layui.all"></script> <!--您的Layui代码start--> <script type="text/javascript"> layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'form'], function () {
var $ = layui.$ , laydate = layui.laydate //日期 , laypage = layui.laypage //分页 , layer = layui.layer //弹层 , table = layui.table //表格 , carousel = layui.carousel //轮播 , upload = layui.upload //上传 , form = layui.form //表单 , element = layui.element; //元素操作 等等... /*layer弹出一个示例*/ // layer.msg('Hello World'); //数据表格实例 let userTable = table.render({
elem: '#demo' // ,width: 312 // ,url: '/static/json/table/user.json' //数据接口 , data: getData() , cols: [[ //表头 {
field: 'id', title: 'ID', fixed: 'left', width: 100} , {
field: 'username', title: '用户名', edit: 'text'} , {
field: 'sorts', title: '排序', edit: true} , {
field: 'status', title: '状态', align: 'center', templet: '#statusTemplet'} , {
field: 'sex', title: '性别'} , {
field: 'experience', title: '积分'} , {
field: 'score', title: '评分'} ]] , page: true //开启分页 , limit: 10 //默认每页记录数 , limits: [3, 6, 9] //可选每页记录数 }); //条件搜索 form.on('submit(demo-search)', function (data) {
let field = data.field; // console.log(field); //执行重载：参数传后台执行重载操作 /*userTable.reload({ //url ajax请求后台接口执行重载 where: field, page: {curr: 1} });*/ //执行重载：前端处理数据模拟返回结果 let resultData = searchData(field); userTable.reload({
//重载js计算返回的模拟数据 data: resultData }); }); //这里是为了演示，前端模拟查询返回数据；正式环境请把参数传到后台，后台分页返回数据 function searchData(field) {
var data = getData(); if (field.status !== '') {
var temp = []; $.each(data, function (key, value) {
if (value.status == field.status) {
temp.push(value); } }); data = temp; } if (field.username != '') {
var temp = []; $.each(data, function (key, value) {
if (value.username.indexOf(field.username) > -1) {
//模糊查询在元素中 temp.push(value); } }); data = temp; } if (field.start_experience != '') {
var temp = []; $.each(data, function (key, value) {
if (value.experience >= field.start_experience) {
temp.push(value); } }); data = temp; } if (field.end_experience != '') {
var temp = []; $.each(data, function (key, value) {
if (value.experience <= field.end_experience) {
temp.push(value); } }); data = temp; } return data; } //模拟返回表单中的数据 function getData() {
let data = [ {
"id": 10000, "username": "user-0", "sex": "女", "experience": 255, "logins": 24, "score": 57, status: 0, sorts: 1, rec: 1 }, {
"id": 10001, "username": "user-1", "sex": "男", "experience": 884, "logins": 58, "score": 70.5, status: 0, sorts: 1, rec: 0 }, {
"id": 10002, "username": "user-21", "sex": "女", "experience": 650, "logins": 77, "score": 31, status: 1, sorts: 2, rec: 1 }, {
"id": 10003, "username": "user-3", "sex": "女", "experience": 362, "logins": 157, "score": 68, status: 0, sorts: 3, rec: 0 }, {
"id": 10004, "username": "user-4", "sex": "男", "experience": 807, "logins": 51, "score": 6, status: 2, sorts: 1, rec: 1 }, {
"id": 10005, "username": "user-5", "sex": "女", "experience": 173, "logins": 68, "score": 87, status: 0, sorts: 4, rec: 0 }, {
"id": 10006, "username": "user-6", "sex": "女", "experience": 982, "logins": 37, "score": 34, status: 2, sorts: 5, rec: 1 }, {
"id": 10007, "username": "user-7", "sex": "男", "experience": 727, "logins": 150, "score": 28, status: 1, sorts: 1, rec: 1 }, {
"id": 10008, "username": "user-8", "sex": "男", "experience": 951, "logins": 133, "score": 14, status: 0, sorts: 7, rec: 1 }, {
"id": 10009, "username": "user-9", "sex": "女", "experience": 484, "logins": 25, "score": 75, status: 0, sorts: 1, rec: 1 } ]; return data; } }); </script> </html>