今天做分頁查詢時需要在跳轉頁面時保存上次查詢的條件，如下：
實現的大致思路就是用cookie本地保存。
其中需要用到jQuery.Cookie插件。
使用方法很簡單：
存數據：$.cookie(“key”,”value”);
取數據：$.cookie(“key”);
我的實現方法就是在每次點擊“查詢”按鈕時，把查詢的條件放入cookie。
在頁面初始化時，會調用jQuery，這時把cookie存放的值從新放入表單中。
整體頁面（使用了bootstrap和jq，如查看頁面，需要導下這兩個的依賴）：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>視頻管理</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/init.css" /> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css" /> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script> <style type="text/css"> .head { background-color: #EFEFF4; font-size: 16px; color: black; padding: 20px; font-size: 20px; overflow: hidden; margin-bottom: 10px; } .table { margin-top: 30px; border: 1px solid #CCCCCC; } .name_info { color: red; } </style> </head> <body> <form id="form" method="post"> <input type="hidden" name="_method" id="_method" value="DELETE" /> <input type="hidden" name="id" id="id" /> </form> <div class="container-fluid"> <div id="row" class="head"> <div class="col-sm-10 col-md-8 col-lg-8"> <p>視頻管理</p> </div> <div id="row" class="col-sm-12 col-md-12"> <div class="col-xs-1"> <a href="#" id="batchDel" class="btn btn-danger btn">批量刪除 <span class="badge" id="badge_0">0</span></a> </div> <div class="col-xs-1"> <c:if test="not empty msg"> <p class="text-danger">刪除成功</p> </c:if> </div> <div class="col-xs-1"> <a href="speaker_add.html" class="btn btn-primary btn">添加</a> </div> <div id="row" class="col-xs-12 col-lg-8 col-md-offset-4 col-lg-offset-1"> <form id="condition" class="form-inline form_0" role="form" method="get"> <input name="currentPage" type="hidden" > <div class="form-group col-xs-4 col-lg-2"> <input name="c_name" type="text" class="form-control" id="name" placeholder="課程名稱"> </div> <div class="form-group col-xs-3 col-lg-3"> <select name="c_id" class="form-control btn-primary"> <option selected = "selected" value="0">請選擇課程</option> <c:forEach items="${courses }" var="course"> <option value="${course.id }">${course.courseTitle }</option> </c:forEach> </select> </div> <div class="form-group col-xs-3 col-lg-2"> <select name="s_id" class="form-control btn-primary"> <option selected = "selected" value="0">請選擇老師</option> <c:forEach items="${speakers }" var="speaker"> <option value="${speaker.id }">${speaker.speakerName }</option> </c:forEach> </select> </div> <div class="form-group col-xs-1 col-md-1"> <button type="submit" class="btn btn-primary">查詢</button> </div> </form> </div> </div> </div> <div class="row"> <div class="col-md-12 col-lg-12"> <table class="table table-striped"> <thead> <tr> <th>選擇</th> <th>序號</th> <th>名稱</th> <th>介紹</th> <th>講師</th> <th>時長</th> <th>播放次數</th> <th>編輯</th> <th>刪除</th> </tr> </thead> <tbody> <c:forEach items="${videos }" var="video"> <tr> <td> <input class="check_0" value="${video.id }" type="checkbox"> </td> <td class="show_id">${video.id }</td> <td class="show_name">${video.title }</td> <td>${video.detail }</td> <td>${video.speaker.speakerName }</td> <td>${video.time }</td> <td>${video.playNum }</td> <td><a class="edit_submit" href="${pageContext.request.contextPath}/video/${video.id}"><span class="glyphicon glyphicon-pencil"></span>編輯</a></td> <td><a href="#" class="delete" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-trash"></span>刪除 </a></td> </tr> </c:forEach> </tbody> </table> <ul class="pagination"> <li><a href="#" id="previous">«</a></li> <c:forEach begin="${pager.pageStart }" end="${pager.pageEnd }" varStatus="status"> <li <c:if test="${pager.currentPage==status.index }">class="active"</c:if> > <a href="#" class="currentPageTag"><c:out value="${status.index }"></c:out></a> </li> </c:forEach> <li><a href="#" id="next">»</a></li> </ul> </div> </div> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">溫馨提示</h4> </div> <div id="info" class="modal-body">你確定要刪除嗎？</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" id="delete_submit" class="btn btn-primary">確定</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div> </body> <script type="text/javascript"> $(document).ready( function() { //刪除按鈕 $(".delete").click( function() { var click_name = $(this).parent().siblings( ".show_name").html(); var click_id = $(this).parent() .siblings(".show_id").html(); $("#info").html( "你確定要刪除視頻：<a class='name_info'>" + click_name + "</a>嗎？"); $("#id").val(click_id); }) $("#delete_submit").click(function() { $("#_method").val("DELETE"); $("#form").submit(); }) //編輯按鈕 $(".edit_submit").click( function() { var click_id = $(this).parent() .siblings(".show_id").html(); $("#id").val(click_id); $("#form").attr("method", "get"); $("#_method").val("get"); $("#form").submit(); }) //獲取選中的個數 $(".check_0").click(function() { $("#badge_0").html($("input[type=checkbox]:checked").length); //alert($("input[type = checkbox]: checked ").length); }) //批量刪除 $("#batchDel").click(function() { var params = ""; $("input[type = checkbox]:checked").each(function(index,element){ //第一個id不需要加前綴 if(index == 0) { params += "?id=" + $(this).val(); } else { params += "&id=" + $(this).val(); } }); $(this).attr('href','${pageContext.request.contextPath}'+params); //window.location.href='${pageContext.request.contextPath}'+params; alert("生成的拼接參數：" + params); }) //分頁 var currentPage=${pager.currentPage}; var pageTotal=${pager.pageTotal}; $("#previous").click(function(){ if(currentPage==1) return; $("input[name='currentPage']").val(currentPage-1); $("#condition").submit(); }) $("#next").click(function(){ if(currentPage==pageTotal) return; $("input[name='currentPage']").val(currentPage+1); $("#condition").submit(); }) $(".currentPageTag").click(function(){ $("input[name='currentPage']").val($(this).html()); $("#condition").submit(); }) //當點擊提交時把查詢的參數存到cookie $("#condition").click(function(){ $.cookie('c_name', $("input[name='c_name']").val()); $.cookie('c_id', $("select[name='c_id']").val()); $.cookie('s_id', $("select[name='s_id']").val()); }) //alert($("select[name='c_id']").val()+":"+$("select[name='s_id']").val()) //加載頁面時將之前提交的參數賦值 var c_name=$.cookie('c_name'); var c_id=$.cookie('c_id'); var s_id=$.cookie('s_id'); if(c_name&&c_name!=0&&c_name!="null"){ $("input[name='c_name']").val($.cookie('c_name')); } if(c_id&&c_id!=0&&c_id!="null"){ $("select[name='c_id']").val($.cookie('c_id')); } if(s_id&&s_id!=0&&s_id!="null"){ $("select[name='s_id']").val($.cookie('s_id')); } }) </script> </html>
cookie相關js:
//當點擊提交時把查詢的參數存到cookie $("#condition").click(function(){ $.cookie('c_name', $("input[name='c_name']").val()); $.cookie('c_id', $("select[name='c_id']").val()); $.cookie('s_id', $("select[name='s_id']").val()); }) //alert($("select[name='c_id']").val()+":"+$("select[name='s_id']").val()) //加載頁面時將之前保存在cookie的參數從新賦值給表單 var c_name=$.cookie('c_name'); var c_id=$.cookie('c_id'); var s_id=$.cookie('s_id'); if(c_name&&c_name!=0&&c_name!="null"){ $("input[name='c_name']").val($.cookie('c_name')); } if(c_id&&c_id!=0&&c_id!="null"){ $("select[name='c_id']").val($.cookie('c_id')); } if(s_id&&s_id!=0&&s_id!="null"){ $("select[name='s_id']").val($.cookie('s_id')); }
實現步驟很簡單，但是其中卻有一個坑：
在把cookie的值插入表單前，需要進行驗證，看值是不是null或者空值。
因為第一次打開頁面時cookie是沒有值，如果不驗證就會出現下面這樣：
正常情況下進行非空驗證需要下面三步：
判斷cookie是否存在對應值？ 可以直接取值，如果沒有值就會返回false
判斷cookie是否存了空值？ 對null進行比較
因為我使用了select標簽，所以還需要判斷是否是默認值，如果是默認值，則不需要處理。
總的語句：$.cookie('c_id')&&$.cookie('c_id')!=0 && $.cookie('c_id')!=null
但是當我使用卻發現即使cookie存了null，.cookie(“c_id”)!=null也返回true.
最后搞了很久發現，當null值存入cookie時，是存入了一個”null”的字符串。不僅如此，對true、false，也是這樣的處理，所以在進行比較時就需要加雙引號：
$.cookie('c_id')!=”null”
這時我就思考了一下，可能不止cookie，對於其他一些key-value類型的容器，對null、false、true等這些特殊符號可能也是做字符串處理，大家以后一定要注意。