分页查询时，使用cookie保存上次的查询条件。jQuery实现方法以及中间遇到的坑

今天做分页查询时需要在跳转页面时保存上次查询的条件，如下：

实现的大致思路就是用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">&laquo;</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">&raquo;</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">&times;</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等这些特殊符号可能也是做字符串处理，大家以后一定要注意。

分页查询时，使用cookie保存上次的查询条件。jQuery实现方法以及中间遇到的坑的更多相关文章

查询时，如何保存获取相关路径url
作为新人,总是会有许多小问题不懂,不知道如何解决的. 这不,这次,遇到了路径获取问题. 在Jsp页面中,获取当前路径,在<script></script>中添加 var ur ...
cookie 保存上次访问url方法
if (Session[Enums.UserInfoSeesion] == null) { HttpCookie cookie = Request.Cookies[Enums.UserLastAcce ...
PHP分页倒序时,需要注意的问题
PHP分页倒序请求,如果有新数据加入,下一页会出现重复数据解决方案: 第一次查询时,给前端返回一个查询时间戳,下一次请求时,把时间戳带过来,只查询比这个时间戳小的数据
关于SubSonic3.0插件使用SubSonic.Query.Select查询时，字段类型为tinyint时列丢失问题的Bug修复
下午在写代码时,突然发现一个列名为Enable的字段怎么也查询不出来,开始以为可能这个名称是关键字,所以给过滤掉了,所以就将名称修改为IsEnable,问题还是一样......将名称又改为IsEnab ...
query_string查询支持全部的Apache Lucene查询语法低频词划分依据模糊查询 Disjunction Max
3.3 基本查询3.3.1词条查询词条查询是未经分析的,要跟索引文档中的词条完全匹配注意:在输入数据中,title字段含有Crime and Punishment,但我们使用小写开头的crime来搜 ...
MySQL多表查询合并结果union all,内连接查询
MySQL多表查询合并结果和内连接查询 1.使用union和union all合并两个查询结果:select 字段名 from tablename1 union select 字段名 from tab ...
[android]-如何在向服务器发送request时附加已保存的cookie数据
[android]-如何在向服务器发送request时附加已保存的cookie数据应用场景:在开发android基于手机端+服务器端的应用时,登陆->获取用户信息->获取授权用户相关业务 ...
页面跳转时中间参数保存(memcache/cookie)
2014年1月19日 17:30:27 我这篇文章就说了一句话:用cookie保存页面间跳转时的参数情景: 客服在后台操作的时候,经常从列表页进入到编辑页,编辑完信息后,还要自动返回之前的列表页问 ...
sql查询时增加自动编号和分页
查询时加序号 a:没有主键的情形: ,) as iid,* into #tmp from TableName Select * from #tmp Drop table #tmp b:有主键的情形: ...

随机推荐

Tensorflow学习教程------创建图启动图
Tensorflow作为目前最热门的机器学习框架之一,受到了工业界和学界的热门追捧.以下几章教程将记录本人学习tensorflow的一些过程. 在tensorflow这个框架里,可以讲是若数据类型,也 ...
.Neter玩转Linux系列之六：Linux下MySQL的安装、配置、使用
一.Linux安装MySQL (1)下载安装包:https://dev.mysql.com/downloads/mysql/ (2)解压并安装命令:tar zxvf 文件名解压完成之后,重名一下文 ...
搭建LAMP环境示例
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
(原)怎样解决python dataframe loc，iloc循环处理速度很慢的问题
怎样解决python dataframe loc,iloc循环处理速度很慢的问题 1.问题说明最近用DataFrame做大数据处理,发现处理速度特别慢,追究原因,发现是循环处理时,loc,iloc ...
Druid源码阅读之连接池
概述 Druid是阿里巴巴开源的一个数据库连接池源码地址.下面简单分析一下连接池是怎么实现的怎么开始阅读如果使用过Druid连接池的都只要在Spring配置中配置jdbc的时候配置Driver是 ...
2—sat
模型的解决方法看论文<利用对称性解决2-SAT问题> HDU1814 :难度1.5 HDU1824: 难度 2 HDU1815: 难度3 HDU1816: 对于每两个人,二选一HDU181 ...
hadoop streaming编程小demo(python版)
大数据团队搞数据质量评测.自动化质检和监控平台是用django,MR也是通过python实现的.(后来发现有orc压缩问题,python不知道怎么解决,正在改成java版本) 这里展示一个python ...
jquery层次选择器：空格 > next + nextAll ~ siblings
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery层次选择器 jquery层次选择器,包括空格.>.next.+.nextAll.~.siblings等函数或表 ...
C#仪器数据文件解析-Word文件（doc、docx）
不少仪器数据报告输出为Word格式文件,同Excel文件,Word文件doc和docx的存储格式是不同的,相应的解析Word文件的方式也类似,主要有以下方式: 1.通过MS Word应用程序的DCOM ...
C#通过OpenCL调用显卡GPU做高效并行运算
GPU的并行运算能力远超CPU,有时候我们会需要用到超大数据并行运算,可以考虑用GPU实现,这是一篇C#调用GPU进行运算的入门教程. 1: 下载相关的库: https://sourceforge.n ...

分页查询时，使用cookie保存上次的查询条件。jQuery实现方法以及中间遇到的坑

分页查询时，使用cookie保存上次的查询条件。jQuery实现方法以及中间遇到的坑的更多相关文章

随机推荐

热门专题