01.这个是基于input标签的查找功能。
02.修改更新table标签的函数,把username这个参数,加到getjson函数的params中,实现依靠username来查询数据。
var username=$("#searchNameId").val();
//如下语句的含义是什么?动态在json格式的js对象中添加key/value,
if(username) params.username=username;//查询时需要
其中的jQuery函数val()通常是和表单元素进行使用的,也就是input标签。可以理解为是input标签获取这个标签内容的专门的函数。
#searchNameId 是一个class是searchNameId 的input标签。
全部的代码是:
function doGetObjects() {
//发送json请求,接受数据
//1.定义url和参数
var pageCurrent=$("#pageId").data("pageCurrent");
//为什么要执行如下语句的判定,然后初始化pageCurrent的值为1
//pageCurrent参数在没有赋值的情况下,默认初始值应该为1.
if(!pageCurrent) pageCurrent=1;
var params={"pageCurrent":pageCurrent};//pageCurrent=2
//为什么此位置要获取查询参数的值?
//一种冗余的应用方法,目的时让此函数在查询时可以重用。
var username=$("#searchNameId").val();
//如下语句的含义是什么?动态在json格式的js对象中添加key/value,
if(username) params.username=username;//查询时需要
var url="log/doFindPageObjects";
//2.发起异步请求,getjson方法
$.getJSON(url,params,function (result) {
//请问result是一个字符串还是json格式的js对象?对象
console.log(result);
dohandlerresult(result);
})
}
03.给查找按钮写一个点击事件。
使用到的jQuery的函数on
在上次的page.html文件中的分页点击事件也是用这个写的,on函数。
在自动加载函数中添加代码:
$(".input-group-btn").on("click",".btn-search",doQueryObjects)
$(function(){
//在log_list.html页面的pageId位置,加载page.html,合二为一。
$("#pageId").load("doPageUI",function(){//资源加载完成执行
doGetObjects();//异步加载日志信息
$(".input-group-btn").on("click",".btn-search",doQueryObjects)
});
})
其中的id属性是input-group-btn的是一个div,.btn-search 表示id属性为btn-search的标签(元素),doQueryObjects是要执行的函数。
04.完成点击函数doQueryObjects
因为直接使用更新table的函数,有一个问题就是,pageCurrent的值,不会一直是1,如果是大于1的数,根据sql语句,table中不会显示内容。
相关的sql:
<sql id="querrybywhere">
from sys_logs
<where>
<if test="username!=null and username!=''">
username like concat("%",#{username},"%")
</if>
</where>
</sql>
<select id="findPageObjects" resultType="com.cy.pojo.sysLog">
select *
<include refid="querrybywhere"></include>
order by createdTime desc limit #{startIndex},#{pageSize}
</select>
需要写一个函数使得pageCurrent的值为1:
function doQueryObjects(){
//为什么要在此位置初始化pageCurrent的值为1?
//数据查询时页码的初始位置也应该是第一页
$("#pageId").data("pageCurrent",1);
//为什么要调用doGetObjects函数?
//重用js代码,简化jS代码编写。
doGetObjects();
}