分頁加多條件查詢，使用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>

 頁面效果