用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);

});

}