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

 

       });

}