layui数据表格 JS+PHP搜索框查询

layui数据表格搜索框查询
先来张效果图，主要写搜索框
layui数据表格 JS+PHP搜索框查询
代码：
CSS代码，需要引入layui.css跟layui.js，怎么引入我就不多说了

<div class="chu" style="margin-top:30px">
				<div class="demoTable layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">项目名称:</label>
							<div class="layui-input-inline">
									<input class="layui-input" name="id" id="textdemo" autocomplete="off">
							</div>
						</div>
						<div class="layui-btn" data-type="reload">搜索</div>
					</div>
		
		</div>

JS代码：

layui.use(['table','form'],function(){
				var table=layui.table;
				var form = layui.form;
					
				
				table.render({
				elem:'#test',
				toolbar: '#toolbarDemo',
				cellMinWidth:120,
				url:'../php/usertable.php',
				//height:'full-300',
				response:{
					statusCode:200
				},
				parseData:function(res){
					
					return{ //layui  JSON格式
						 "code": res.status, //解析接口状态
				          "msg": res.message, //解析提示文本
				          "count": res.total, //解析数据长度
				         "data": res.rows.item //解析数据列表
					}
					
				},
				cols:[[
				{checkbox:true,fixed:true,LAY_CHECKED:false,filter:'test'},
				{field:'inexId',title:'ID',sort:true,fixed:true},
				{field:'inexDesc',title:'项目名称',sort:true,width:'30%',edit: 'text'},
				{field:'projId',title:'(待定名称)',edit: 'text'},
				{field:'inTime',title:'(申请时间)',edit: 'text'},
				]],
				text: {
				none: '暂无相关数据', //默认：无数据。
			 	},
			 page:{//分页
				 layout:['count','prev','page','next'],//自定义布局
				 curr:1,//设定初始页
				 limit:10,//数量
				 groups:5,//页码
				 theme:'#1E9FFF'
			 },
			defaultToolbar:['filter','print','exports'],
			id:'textreload'	**//这个是重点**
				});
		var $=layui.$,active={
					reload:function(){
						var textdemo=$('#textdemo').val();
						table.reload('textreload',{
							url:'../php/usertable.search.php',
							method:'get',
							page: {
								curr: 1 //重新从第 1 页开始
							  },
							where:{
								key:textdemo
								
							}
						})

					}
				}
				$('.chu .layui-btn').on('click', function(){
					var type = $(this).data('type');
				
					if($('#textdemo').val()==""){
						layer.msg('查询项目不能为空');
						return false;
					}
					active[type] ? active[type].call(this) : '';
				  });
	});

PHP 搜索框的PHP(接口)

<?php
 $page=$_GET['page'];  //前端传过来的分页
 $limit=$_GET['limit'];
$key=$_GET['key'];		//前端传来的值

$dbhost = 'localhost:3306';  // mysql服务器主机地址
$dbuser = 'root';            // mysql用户名
$dbpass = '123456';          // mysql用户名密码
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
    die('连接失败: ' . mysqli_error($conn));
}
// 设置编码，防止中文乱码
mysqli_query($conn , "set names utf8");
$hang="SELECT * FROM inexp WHERE inexDesc LIKE '%$key%'";  //模糊查询语句

$a=($page-1)*$limit;

$sql = "SELECT * FROM inexp limit $a,$limit";//分页

mysqli_select_db( $conn, 'incomeadmin' );

$hangs=mysqli_query( $conn, $hang );//查询行数
$row=mysqli_num_rows($hangs);

$retval = mysqli_query( $conn, $hang );//查询 模糊查询的 行数

if(! $retval )
{
    die('无法读取数据: ' . mysqli_error($conn));
}

 $results = array();
$results=mysqli_query($conn,$hang);
if(mysqli_num_rows($results)>0){
    echo '{"status":200,"message":"","total":'.$row.',"rows":{"item":[';  //layui的json格式，具体看下官方文档
    $i=1;
    while($row = mysqli_fetch_assoc($results)) {
        $i++;
        echo json_encode($row, JSON_UNESCAPED_UNICODE);
        if($i<mysqli_num_rows($results)+1){
            echo ",";
        }

    }
    echo "]}}";
}

mysqli_close($conn);

?>

layui数据表格 JS+PHP搜索框查询

相关推荐