cookie记录BootStrap table的分页

需求：将bootStrap table的分页信息存储在浏览器端的Cookie中，用户下次打开此页面时默认用户上次的分页。

 实现的大致思路就是用cookie本地保存。

其中需要用到jQuery.Cookie插件。http://plugins.jquery.com/cookie/

使用方法很简单：

　　存数据：$.cookie(“key”,”value”);

　　取数据：$.cookie(“key”);

注意：当我们进行判空处理时不要这样写：$.cookie('c_id')!=null

当null值存入cookie时，是存入了一个”null”的字符串。不仅如此，对true、false，也是这样的处理，所以在进行比较时就需要加双引号：

$.cookie('c_id')!=”null”

具体实现如下：

1.将分页信息存储在cookie中，那么我们要在什么时候存呢？刚开始是想在进行查询的时候存，后来发现当你点击分页按钮时候并没有走你自己写的query方法，但是每次查询table都会去获取查询参数，代码如下：

oTableInit.queryParams = function(params) {
        $.cookie("pageSize",params.limit,{expires:1,path:"/",secure:false,raw:false});
//$.cookie("名称"，"值",{"过期时间","cookie的有效路径","规定是否通过安全的 HTTPS 连接来传输 cookie","读取和写入 cookie 的时候自动进行编码和解码"});
//刚好在这里可以获取到分页的值，我们把limit放入cookie中
        var temp = { 
            limit : params.limit, // 页面大小
            offset : params.offset, // 页码
            cmtText:$("#txt_search_cmtText").val(),
            orderNo:$("#txt_search_orderNo").val(),
            flightNo:$("#txt_search_flightNo").val(),
            cmtTime_start:$("#search_cmtTime_start_time").val(),
            cmtTime_end:$("#search_cmtTime_end_time").val(),
            emotion:$("#txt_search_emotion").val(),
            classfyLevel1Code:$("#txt_search_classfyFirst").val(),
            classfyLevel2Code:$("#txt_search_classfySecond").val(),
            classfyLevel3Code:$("#txt_search_classfyThird").val(),
            readFlag:$("#txt_search_readflag").val(),
            flightDate_start:$("#search_start_time_flightDate").val(),
            flightDate_end:$("#search_end_time_flightDate").val(),
            isSuggestion:$("#txt_search_is_suggestion").val()
        };
        //console.log(temp);
        return temp;
    };

2.获取cookie并给table初始化时候使用。那么问题来了，我们要什么时候吧这个值给table呢？看代码：

$('#tb_comment').bootstrapTable({
            ajax: function(params) {
                params.success(resultAjax('/comment/queryCommentPage', params.data));
            },
//            method : 'get', // 请求方式（*）
            //toolbar : '#toolbar', // 工具按钮用哪个容器
            striped : true, // 是否显示行间隔色
            cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination : true, // 是否显示分页（*）
            sortable : false, // 是否启用排序
            sortOrder : "asc", // 排序方式
            queryParams : oTableInit.queryParams,// 传递参数（*）
            sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）
            pageNumber : 1, // 初始化加载第一页，默认第一页
            //pageSize : 5,原本这里是这么写的，把它替换成一个方法，在方法里获取cookie的值，只会在初始化表格是执行一次
　　　　　　　pageSize : getCookiePage(), // 每页的记录行数（*）
            pageList : [ 5, 10, 25, 50, 100 ], // 可供选择的每页的行数（*）
            paginationLoop: false,
            //search : true, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch : true,
            //showColumns : true, // 是否显示所有的列
            //showRefresh : true, // 是否显示刷新按钮
            //minimumCountColumns : 2, // 最少允许的列数
            clickToSelect : false, // 是否启用点击选中行
            // height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId : "ID", // 每一行的唯一标识，一般为主键列
            showToggle : false, // 是否显示详细视图和列表视图的切换按钮
            cardView : false, // 是否显示详细视图
            checkboxHeader: true,
            detailView : false, // 是否显示父子表
            rowStyle: function (row, index) {
                //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                var strclass = "";
                if (row.readFlag == "1") {
                    strclass = 'success';//还有一个active
                }
                return { classes: strclass }
            },
            columns : [ {
                field : 'checkbox',
                checkbox:true,
                width:  '2%'
            },{
                field : 'index',
                title : '序号',
                halign: 'center',
                align: 'center',
                width:  '3%',
                formatter: function(value, row, index) { return index + 1; }
            }, ........]
        });
    };
    function getCookiePage(){
        var pageSize = $.cookie("pageSize");  //读取name为pageSize的值
        var regu = /^[1-9]\d*$/;//正则表达式判断是否为数字，否则默认展示5条
        if(!regu.test(pageSize)) {
            pageSize = 5;
        }
        return pageSize;
    }