单表多字段查询在一些稍微复杂一点的查询中十分有用。这里主要利用MySQL数据库中的concat函数实现单表多字段多关键词查询。并且显示查询结果的表格可根据所选数据表动态生成。
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://www.jb51.net/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/jPages.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //回车提交查询 $('#queryBox').keydown(function(e){ if(e.keyCode == 13) { $("#query").focus();//查询按钮获得焦点 $("#query").click();//调用点击提交按钮 } }); //点击查询按钮 $("#query").click(function(){ //获取用户选择的数据表和查询关键词 var queryType=$("#queryType").val().trim(); var queryKeywords=$("#queryKeywords").val().trim(); //对查询关系词的内容进行限制，比如只能输入汉字、字母、数字和空格。 var reg=https://www.jb51.net/^[ a-zA-Z0-9\u4e00-\u9fa5]+$/; if(reg.test(queryKeywords)==false) { $("#queryTip").text("您输入的关键词有部分内容不符合要求，只能输入汉字、字母、数字和空格。"); } //如果内容检测通过，开始提交查询 else { if(queryType!="" && queryKeywords!="") { $("#queryTip").text("正在为您检索，请稍候……"); //使用ajax访问php页面进行查询 $.ajax({ type:"post", url:"queryInIndex.php", async:true, data:{queryType:$("#queryType").val(),queryKeywords:$("#queryKeywords").val()}, dataType:"json", success:function(data){ if(data=="no") { $("#queryTip").text("没有找到您要查询的信息。"); } else { $("#queryTip").text("为您找到 "+data.length+" 条信息。"); //预设结果表格字符名 if($("#queryType").val()=="users") fieldsString="邮箱，姓名，英文名，学号，学位类型，导师，手机，房间"; else if($("#queryType").val()=="papers") fieldsString="作者，标题，期刊/会议，卷期页，级别，状态"; else if($("#queryType").val()=="softwares") fieldsString="作者，标题，登记号，日期"; else if($("#queryType").val()=="patents") fieldsString="作者，标题，受理日期，受理号，授权日期，授权号"; //调用函数创建表格 createTable("queryResultList",data,fieldsString,"queryResultPager"); $("#queryKeywords").focus();// 关键词文本框继续获得焦点，以方便用户继续输入内容 } } }); } else { $("#queryTip").text("请先选择查询类型，并输入关键词，然后点击查询按钮。"); $("#queryKeywords").focus(); } } }) function createTable(tableHolder,data,fieldsString,pagerHolder) //自动创建结果表格的函数 /* 参数含义： tableHolder：显示结果表格的父元素 data：JSON格式的查询结果 fieldsString：字段名字符串 pagerHolder：显示分页导航的元素 * */ { fieldsArr=fieldsString.split("，");//对字段名字符串进行分割 var columnNum=fieldsArr.length; //获取列数 var rowNum=data.length;//获取行数 $('#'+tableHolder).html("");//清除现有表格 $('#'+tableHolder).append("<table><thead><tr></tr></thead><tbody></tbody></table>"); //设置表格结构 var i=0; //临时循环变量 while(i<columnNum) //加载字段值 { $('#'+tableHolder+" thead tr").append("<th>"+fieldsArr[i]+"</th>"); i++; } i=0; while(i<rowNum)//加载数据 { var j=0; $('#'+tableHolder+" tbody").append("<tr>") while(j<columnNum) { $('#'+tableHolder+" tbody tr:last").append("<td>"+data[i][j]+"</td>"); j++; } $('#'+tableHolder+" tbody").append("</tr>") i++; } //分页导航，这里利用jPages插件 $("#"+pagerHolder).jPages({ containerID : tableHolder+" tbody", //存放表格的窗口标签ID previous : "前一页", //指示首页的按钮 next : "下一页",//指示尾页的按钮 perPage : 10,//每页显示表格的行数 delay : 0 //分页时动画持续时间，0表示无动画 }); //设置结果表格的隔行变色 $('#'+tableHolder+" tr:odd").css("background-color","#fff"); $('#'+tableHolder+" tr:even").css("background-color","#efefef"); } }) </script> </head> <body> <div> <span> <select><!--选择数据表的下拉菜单--> <option selected="selected" value="">请选择数据表</option> <option value="users">学生信息</option> <option value="papers">论文</option> <option value="softwares">软著</option> <option value="patents">专利</option> </select> </span> <span> <input type="text"/><!--输入查询关键词的文本框--> <input type="button" /> <!--提交查询按钮--> </span> <div>本功能支持以空格为分割标记的多词查询。</div><!--信息提示框--> </div> <div></div><!--用于显示查询结果--> <div></div><!--结果分页导航的容器--> </body> </html>
queryInIndex.php：