layui資料表格搜尋
阿新 • • 發佈：2022-05-22
簡單介紹
我是通過Servlet傳遞json給layui資料表格模組，實現遍歷操作的，不過資料量大的話還是需要搜尋功能的。這是我參考網上大佬程式碼寫出的搜尋功能。
實現原理
要實現搜尋功能，肯定需要連結資料庫並在資料庫根據相應的欄位查詢，把查詢結果再返回到layui資料表格，因為需要展示我們在資料庫查詢到的資料，所以需要過載表格，也就是隻重新整理一下表格。
實現方法
首先獲取到自己的搜尋框的資料，把資料傳到過載模組的where中傳到後臺，給搜尋設定點選事件，通過url把where中的搜尋框內容以json形式傳遞到Servlet中，Servlet呼叫dao層的查詢方法，最後Servlet把從資料庫搜尋到的資料通過json形式傳遞給layui資料表格。
原始碼
index.html
<html>
<head>
<meta charset="utf-8">
<title>學生資訊表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
SelectServlet.java（Servlet）
import COM.Bean.student; import COM.Dao.mannger; import com.fasterxml.jackson.databind.ObjectMapper; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; @WebServlet(name = "SelectServlet", value = "/SelectServlet") public class SelectServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8");//設定相應的文字型別 response.setContentType("text/html;charset=utf-8");//設定響應型別,並防止中文亂碼 ArrayList<student> stulist = new ArrayList<>(); mannger dao = new mannger(); String id = request.getParameter("id"); //接收where中的id欄位 dao.select(stulist,id); int count1 = stulist.size(); String count = ""+ count1; Map<String, Object> result = new HashMap<String, Object>(); //下面是把arraylist轉成layui需要的json形式。 //System.out.println(paperslist); result.put("code", 0); result.put("msg", ""); result.put("count",count); result.put("data",stulist); System.out.println(result); ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString (result); response.getWriter().print(json.toString()); System.out.println(result); } }
效果截圖
到這裡就結束了，有不懂的可以私信哦。