用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
1. 思路
在写分页的时候必定要考虑到在组合查询的时候也要分页。组合查询就是把你想要查询的条件获取并传到servelt中去处理，拼接成sql语句。
2．首先获取模糊查询的条件
所使用的html代码为：
<div>
姓名：<input type="text" name="name" id="name"/>
年龄：<input type="text" name="age" id="age"/>
出生日期：<input type="text" name="birth" id="birth"/>
薪资：<input type="text" name="salary" id="salary"/>
<input type="button" id="selBtn" value="查询员工"/>
</div>
当点击按钮的时候触发的事件
$("#selBtn").click(function(){
//val是获取当前匹配的值 在获取文本框中的值的时候要用val来获取
var $hrName = $("#name").val();
var $hrAge = $("#age").val();
var $hrBirth = $("#birth").val();
var $hrSalary = $("#salary").val();
var parms = "hrName="+$hrName+"&hrAge="+$hrAge+"&hrBirth="+$hrBirth+"&hrSalary="+$hrSalary;
//里面的三个参数一个是（当前页，拼接的参数，拼接好的sql语句）
getInfo(1,parms,"");
});
下面的getInfo就是一个分页的方法：
//分页的操作
function getInfo(nowPage,parms,where) {
//首先要判断parms是否为空
//把数据parms提前出来
if(parms==null){
//第一次访问的时候
parms = "oper=all&nowPage=" + nowPage+"&where="+encodeURIComponent(where);
}else{
parms = parms+"&oper=all&nowPage=" + nowPage+"&where="+where;
}
//发送jQuery中的json数据 查询所有
$.getJSON("./servlet/ListEmployeeJQuery?"+parms,function(data) {
//得到dom对象来获取员工的信息
var $dat = $(data.datas);
//在每次循环之前要清除以前的
$("#emps").each(function(index, dom) {
if (index == 0) {
$(this).empty(dom);
}
});
$dat.each(function(index, dom) {
//创建tr
var $tr = $("<tr/>");
$tr.attr("align", "center");
//创建td1，用来实现全选和反选的批量删除
var $td1 = $("<input type='checkbox'>");
//设置name和value，在批量中用到
$td1.attr("name","del");
$td1.attr("value",dom.id);
$tr.append($td1);
//创建td2,用来放编号
var $td2 = $("<td/>");
$td2.append(dom.id);
$tr.append($td2);
//创建td3，用来存放姓名
var $td3 = $("<td/>");
$td3.append(dom.hrName);
$tr.append($td3);
//创建td4，用来存放性别
var $td4 = $("<td/>");
$td4.append(dom.hrSex);
$tr.append($td4);
//创建td5，用来存放年龄
var $td5 = $("<td/>");
$td5.append(dom.hrAge);
$tr.append($td5);
//创建td6，用来存放出生日期
var $td6 = $("<td/>");
if (dom.hrBirth) {
$td6.append((dom.hrBirth.year + 1900) + "年"
+ (dom.hrBirth.month + 1) + "月"
+ (dom.hrBirth.date) + "日");
}
$tr.append($td6);
//创建td7，用来存放薪资
var $td7 = $("<td/>");
$td7.append(dom.hrSalary);
$tr.append($td7);
//把创建的tr放到id为 emps中
$("#emps").append($tr);
//为表格设置偶数行的颜色
$("#emps>tr:even").css("background-color", "pink");
//为表格设置奇数行的颜色
$("#emps>tr:odd").css("background-color", "#BEBEBE");
});
//分页创建
//分页在创建之前一定要清除
$("#pages").each(function(index, dom) {
if (index == 0) {
$(this).empty(dom);
}
});
//首页
var $firstPage = $("<a href='#'>");
$firstPage.append("首页");
$firstPage.click(function() {
data.nowPage = 1;
//获取当前页信息
getInfo(data.nowPage,null,data.whereSql);
});
//上一页
var $backPage = $("<a href='#'>");
$backPage.append("上一页");
$backPage.click(function() {
if (data.nowPage <= 1) {
data.nowPage = 1;
} else {
data.nowPage = data.nowPage - 1;
}
//获取当前页信息
getInfo(data.nowPage,null,data.whereSql);
});
//下一页
var $nextPage = $("<a href='#'>");
$nextPage.append("下一页");
$nextPage.click(function() {
if (data.nowPage >= data.countPage) {
data.nowPage = data.countPage;
} else {
data.nowPage = data.nowPage + 1;
}
//获取当前页信息
getInfo(data.nowPage,null,data.whereSql);
});
var $lastPage = $("<a href='#'>");
$lastPage.append("末页");
$lastPage.click(function() {
//获取当前页信息
data.nowPage = data.countPage;
getInfo(data.nowPage,null,data.whereSql);
});
//把分页的文本添加到id为pages中，即是加入到jsp中显示
$("#pages").append($firstPage);
$("#pages").append($backPage);
$("#pages").append($nextPage);
$("#pages").append($lastPage);
});
}