分页加多条件查询，使用javaajaxjs

实体类

跟数据库的数据最好保持一致显示在页面中

package entity;

public class Menu {
    private int mid;
    private String mname;
    private double mprice;
    private String micon;
    private int  mstatus ;
    private int msale;//销量
    private String mdesc;//描述
    private String mtimeout;//gengxinshijian
    private String tname;//菜品类型
    public int getMid() {
        return mid;
    }
    public void setMid(int mid) {
        this.mid = mid;
    }
    public String getMname() {
        return mname;
    }
    public void setMname(String mname) {
        this.mname = mname;
    }
    public double getMprice() {
        return mprice;
    }
    public void setMprice(double mprice) {
        this.mprice = mprice;
    }
    public String getMicon() {
        return micon;
    }
    public void setMicon(String micon) {
        this.micon = micon;
    }
    public int getMstatus() {
        return mstatus;
    }
    public void setMstatus(int mstatus) {
        this.mstatus = mstatus;
    }
    public int getMsale() {
        return msale;
    }
    public void setMsale(int msale) {
        this.msale = msale;
    }
    public String getMdesc() {
        return mdesc;
    }
    public void setMdesc(String mdesc) {
        this.mdesc = mdesc;
    }
    public String getMtimeout() {
        return mtimeout;
    }
    public void setMtimeout(String mtimeout) {
        this.mtimeout = mtimeout;
    }
    
    public String getTname() {
        return tname;
    }
    public void setTname(String tname) {
        this.tname = tname;
    }
    private void Mneu() {

    }
}

接口

需要查询总条数和把数据查出来

public List<Menu> searchMenu1(Menu menu, int page);//搜索
public int selectAllcount1(Menu stu);//查詢搜索總行數

连接数据库的工具类

与数据库完成链接，才能从数据库中查询值

package util;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
import org.apache.commons.dbcp2.BasicDataSource;
import org.apache.commons.dbcp2.BasicDataSourceFactory;
public class dbcputil {
    private static     Properties p=new Properties();//创建一个空的属性列表
    private static  BasicDataSource dbSource=null;
    static{
        ClassLoader loader=Thread.currentThread().getContextClassLoader();//加载配置文件 将配置文件转换成一个属性对象
        InputStream input=loader.getResourceAsStream("dbcp.properties");//通过加载器获取一个输入流
        try {//将输入流中的数据转换成一个属性对象    
            //将输入流的数据加载到 p中
            p.load(input);
            //获取数据源
            dbSource=BasicDataSourceFactory.createDataSource(p);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    public static BasicDataSource getdb(){
        return dbSource;
    }
    //获取数据库连接对象//通过数据源来获取连接对象
    public static Connection getContention(){
        try {
            //从数据源获取数据库连接对象
            return dbSource.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }    
    //关闭数据库连接  将连接对象换给数据源进行管理
    public static void closeDB(Connection con,Statement st,ResultSet rs){
        try {
            if(rs!=null)rs.close();
            if(st!=null)st.close();
            if(con!=null)con.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }
}

实现类

主要还是多条件查询是否为空，因为多条件查询的时候可以只查一个条件，或者查询所有的条件，如果不为空才会把sql语句加上去

@Override
    public List<Menu> searchMenu1(Menu stu, int page) {
        
        List<Menu>list=new ArrayList<Menu>();
        List<Object>pramaters=new ArrayList<Object>();
        String sql="select * from menu where 1=1";
        
        if(stu.getTname()!=null){
            sql+=" and tname=?";
            pramaters.add(stu.getTname());
        }
        if(stu.getMname()!=null){
            sql+=" and mname like concat('%',?,'%')";
            pramaters.add(stu.getMname());
        }
        if(stu.getMdesc()!=null){
            sql+=" and mdesc like concat('%',?,'%')";
            pramaters.add(stu.getMdesc());
        }
        if(stu.getMprice()!=0){
             sql+=" and mprice <=?";
             pramaters.add(stu.getMprice());
        }
        int index=(page-1)*10;
        sql+=" limit ?,10"; 
         pramaters.add(index);
         System.out.println(sql);
        //2.获取数据库 连接对象
         Connection con=dbcputil.getContention();
        //3.获取预编译对象
         PreparedStatement st=null;//预编译语句对象
         ResultSet rs=null;//结果集
         try {
            st=con.prepareStatement(sql);
         //4.给预编译对象占位符进行赋值
            for (int i = 0; i <pramaters.size(); i++) {
                //按对象给他们赋值
                st.setObject(i+1,pramaters.get(i));
            }
        
        //5.执行预编译语句
            rs=st.executeQuery();
           //遍历结果集
           while(rs.next()){
            //初始化一个mode对象
              Menu mode=new Menu();
              mode.setMid(rs.getInt("mid"));
              mode.setMname(rs.getString("mname"));
              mode.setMdesc(rs.getString("mdesc"));
              mode.setMicon(rs.getString("micon"));
              mode.setMprice(rs.getDouble("mprice"));
              mode.setMstatus(rs.getInt("mstatus"));
              mode.setMtimeout(rs.getString("mtimeout"));
              mode.setMsale(rs.getInt("msale"));
              mode.setTname(rs.getString("tname"));
              list.add(mode);   
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally {
            //关闭数据库
             dbcputil.closeDB(con, st, rs);
        }
         
        return list;
    }

    @Override
    public int selectAllcount1(Menu stu) {
        String sql="select count(*) as c from menu where 1=1";
        List<Object>pramaters=new ArrayList<Object>();
        if(stu.getTname()!=null){
            sql+=" and tname=?";//每次加等的时候都需要加一个空格
            pramaters.add(stu.getTname());
        }
        if(stu.getMname()!=null){
            sql+=" and mname like concat('%',?,'%')";
            pramaters.add(stu.getMname());
        }
        if(stu.getMdesc()!=null){
            sql+=" and mdesc like concat('%',?,'%')";//
            pramaters.add(stu.getMdesc());
        }
        if(stu.getMprice()!=0){
             sql+=" and mprice <=?";
             pramaters.add(stu.getMprice());
        }
        //2.获取数据库连接对象
                Connection con=dbcputil.getContention();
                //3.获取预编译对象
                PreparedStatement st=null;
                ResultSet rs=null;
                int count=0;
                try {
                     //4.给预编译对象占位符进行赋值
                    st=con.prepareStatement(sql);
                    for (int i = 0; i <pramaters.size(); i++) {
                        //按对象给他们赋值
                        st.setObject(i+1,pramaters.get(i));
                    }
                    rs=st.executeQuery();
                    while(rs.next()){
                        //1.通过列下表获取元素 
                        count=rs.getInt("c");
                        System.out.println(count);
                    }
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } finally{
                    dbcputil.closeDB(con, st, rs);
                }
                return count;
    }
}

servlet

我们不仅需要把总条数传过去，而且需要把返回的查询数据传过去，所以可以吧他们当成键值对的形式存放到map中

package menuconntroller;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import entity.Menu;
import impl.menuimpl;


@WebServlet("/search.do")
public class searchmenu extends HttpServlet {
    private static final long serialVersionUID = 1L;
       @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
    //1.获取前端发送过来的数据
        Menu stu=new Menu();
        int page=Integer.parseInt(req.getParameter("page")); //分页
        String type=req.getParameter("type");
        //获取相应的字段
        String price=req.getParameter("price");
        String name=req.getParameter("mname");
        String desc=req.getParameter("desc");
        //设置属性的值
        if(type.length()==0)stu.setTname(null);
        else stu.setTname(type);
        if(name.length()==0)stu.setMname(null);
        else stu.setMname(name);
        if(desc.length()==0)stu.setMdesc(null);
        else stu.setMdesc(desc);
        if(price.length()==0)stu.setMprice(0);
        else stu.setMprice(Double.parseDouble(price));
   //2.处理数据
        menuimpl dao=new menuimpl();
        List<Menu>list=dao.searchMenu1(stu,page);//查询分页
        int count=dao.selectAllcount1(stu);
        int countPage= count%10==0?count/10:count/10+1;//总页数
        System.out.println(countPage);
       /* 
        {
         countPage:20;
         data:[] 
        }
        */
        HashMap<String,Object>map=new HashMap<String, Object>();
        map.put("countpage", countPage);
        map.put("data",list);
        System.out.println(list);
        
   //3.响应数据        
        //响应头的相关设置
        resp.setContentType("text/html;charset=utf-8");
        //将数据转换成json字符串
        resp.getWriter().println(JSON.toJSONString(map));
       } 
}

前端

注意接下来展示的数据放在tbody中

<!DOCTYPE html>
<html>
<head>
<title>菜单展示</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta charset="utf-8">
    <meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
        table{
           width:1200px;
           border:1px solid;
           border-collapse:collapse;
         }
         tr,th,td{
          border:1px solid;
         }
         td{
          text-align: center;
         }
     </style>
  </head>
  <body onload="sendData()">
    <form method="post" action="">
            <div>
                <strong > 菜品列表</strong> 
            </div><br>
            <!-- <a href="JavaScript:sendData()" >查询所有的菜品</a> -->
            <div>
                    <a class="button border-main icon-plus-square-o"href="option1.do"> 添加菜品</a>
                    <select name="cid" class="input"  id="types"  style="width:150px; line-height:17px;" >
                       <option value="" >请选择菜品分类</option>
                       <c:forEach items="${list }" var="type">
                           <option value=${type.tname }>${type.tname }</option>
                       </c:forEach>
                    </select>
                    <select name="price" id="price" style="width:150px; line-height:17px;">
                    <option value="">请选择价格</option>
                    <option value="20">二十块钱以下</option>
                    <option value="40">四十块钱以下</option>
                    <option value="60">六十块钱以下</option>
                    <option value="80">八十块钱以下</option>
                    <option value="100">一百块钱以下</option>
                    </select>
                
                    <input type="text" value=""  placeholder="请输入菜名"  id="mname" name="mname"  />
                    <input type="text" value=""  placeholder="请输入搜索关键字"id="desc" name="desc"  />
                    <a href="JavaScript:search()" >搜索</a>
            </div>
            <br><br>
            <table>
                <tr>
                    <th>菜品ID</th>
                    <th>菜品图片</th>
                    <th>菜品名称</th>
                    <th>菜品价格</th>
                    <th>菜品分类</th>
                    <th>菜品状态</th>
                    <th>菜品描述</th>
                    <th>菜品销量</th>
                    <th>更新时间</th>
                    <th>销售总价</th>
                      <th>操作</th>
                </tr>
                <tbody id="content">
                </tbody>
         </table>
         <br>
                <a href="JavaScript:previous()" >上一页</a>
                <span id="page"></span>
                <a href="JavaScript:next()">下一页</a>
    </form>
</body>

ajax交互

注意在进行一次新的查询的时候，清除原来查询的内容

 function previous(){
       if(page!=1){ //上一页
          page--;
           sendData();
       }
   }
  
   function next(){ //下一页
        page++;
          sendData();
          
   }
    //给table添加数据
   function addcontent(jsonObj){
     var obj=jsonObj.data;
      for( i=0;i<obj.length;i++){
       var tab=document.getElementById("content");
       var tr=document.createElement("tr");//创建一行
       var td1=document.createElement("td");
       var td2=document.createElement("td")
       var td3=document.createElement("td");
       var td4=document.createElement("td");
       var td5=document.createElement("td");
       var td6=document.createElement("td");
       var td7=document.createElement("td");
       var td8=document.createElement("td");
       var td9=document.createElement("td");
       var td10=document.createElement("td");
       var td11=document.createElement("td");
       td1.innerText=obj[i].mid;
       var src=obj[i].micon ;
       var img=document.createElement("img");
      img.setAttribute("src", src);
      img.setAttribute("width", "60px");
      img.setAttribute("height", "50px");
      td2.appendChild(img);
      td3.innerHTML=obj[i].mname;
      td4.innerHTML=obj[i].mprice;
      td5.innerHTML=obj[i].tname;
     if(obj[i].mstatus==0){
          td6.innerHTML="上架";
     }else{
          td6.innerHTML="下架";
     }
     td7.innerHTML=obj[i].mdesc;
     td8.innerHTML=obj[i].msale;
     td9.innerHTML=obj[i].mtimeout
     var a=document.createElement("a");
     var a1=document.createElement("a");
     var node = document.createTextNode("修改");//给a标签设置value值
     a.appendChild(node);//吧value值添加到a标签
     a.setAttribute("href","option2.do?id="+obj[i].mid);//给a标签设置herf属性//修改的时候吧id传过去
     if(obj[i].mstatus==0){
     var node1 = document.createTextNode("上架");
     }else{
     var node1 = document.createTextNode("下架");
     }
     a1.appendChild(node1);
     a1.setAttribute("href", "deletemenu.do?id="+obj[i].mid+"&statues="+obj[i].mstatus); 
     td11.appendChild(a);
     td11.appendChild(a1); 
     tab.append(tr); //把tr添加到table 吧td添加到tr
     tr.append(td1);
     tr.append(td2);
     tr.append(td3);
     tr.append(td4);
     tr.append(td5);
     tr.append(td6);
     tr.append(td7);
     tr.append(td8);
     tr.append(td9);
     tr.append(td10);
     tr.append(td11);
     
       }
   }
     //删除table的数据
   function removeElement(){
       //1.找到table 
        var tab=document.getElementById("content");
       //2.移除所有的元素
        var length=tab.rows.length;
        for(var index=0;index<length;index++){
            tab.deleteRow(0);
        }
   }  
  function onSearch(){
      //page 等于1
       page=1;
      //调用搜索方法
      search();
   } 
   var type=document.getElementById("types");
   var price=document.getElementById("price");
   var mname=document.getElementById("mname");
   console.log(name.value);
   var desc=document.getElementById("desc");
   console.log(desc);
   function search(){
         //1.初始化一个XmlHttpRequset对象
         var req=new XMLHttpRequest();
         //2.构建请求的参数URl
         var url="search.do?page="+page+"&type="+type.value+"&price="+price.value+"&mname="+mname.value+"&desc="+desc.value;
        console.log(url);         
         req.open("get",url,true);
         //3.发送请求
         req.send();
         //4.监听请求的数据
         req.onreadystatechange=function(){
            //监听状态
            if(req.readyState==4&&req.status==200){
                //把响应的数据转换成json对象
                var jsonObj=JSON.parse(req.responseText);
                console.log(jsonObj.data);
                     if(jsonObj.data.length==0){
                         alert("已经到尾部了 没有更多数据了");
                         page--;//page 自减1
                         return;
                      }
                 //设置总页数 和当前页数
                 var lab=document.getElementById("page");
                 lab.innerText=page+"页/"+jsonObj.countpage+"页";
                 //删除表上原有的数据
                 removeElement();
                //将数据刷新到当前页面的table中
                 addcontent(jsonObj);
            }
         }
    }
</script>

 页面效果