【Layui】table模块数据表格，加上搜索框样式

Layui中的table模块数据表格，笔者没有找到增加搜索框的方法

---

最终的效果就是如图这样的

 

 

 

---

 

主要修改了1个地方：

1、页面上，toolbar中加上了一个input输入框(你要去掉<div class="layui-btn-container">这个class，不然输入框无法输入)

 <script type="text/html" id="toolbar">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
	<button class="layui-btn layui-btn-sm" lay-event="generate">生成静态页面</button>
	<div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="LAYTABLE_SEARCH"><i class="layui-icon layui-icon-search"></i></div> 
	<input type="text" id="title" style="width:200px;float:right;height:30px;" placeholder="请输入标题" autocomplete="off" class="layui-input">
</script>

2、监听头工具栏事件   加上对搜索的监听，方法即官方提供的表格重载方法

case 'LAYTABLE_SEARCH':
    	  tableIns.reload(
    		  {
    			  where: {
    			    title: $("#title").val()
    			  }
    			  ,page: {
    			    curr: 1 //重新从第 1 页开始
    			  }
    			}
    	  );
      break;