表格点击某列排序

对于表格点击列进行排序，Yii本身有自带的排序，js的tablesorter插件可以对静态的表格进行排序，只需加载tablesorter.js然后再调用$("#mytable").tablesorter();即可，这里的mytable为表格的id

    但是tablesorter不能将数据库里查出的数据整体排序，所以就动手写了的js

下面是html表格的列

<thead>
        <tr>
            <th data-id="id" data-order="<?php echo $order?>" style="cursor: pointer">序号</th>
            <th data-id="url" data-order="<?php echo $order?>" style="cursor: pointer">受访页面</th>
            <th>当前页面平均停留时间</th>
            <th>最高停留时间</th>
            <th>最低停留时间</th>
            <th>总UV</th>
        </tr>
        </thead>

以下是js代码

<script type="text/javascript">
            $(".items th").click(function(){
                var id = $(this).data("id"),
                    order =  $(this).data("order");
                location = "?id="+id+"&order="+order;
            });
</script>

当该表格还存在查询时则要用到以下的代码

<script type="text/javascript">
        $(function(){
            $(".items th").click(function(){
                console.log( "a", search.val() );
                var id = $(this).data("id"),
                    order =  $(this).data("order");
                search("id", id);
                search("order", order);
                location = search.val();
            });

        })
</script>

对于search函数

/** location.search 操作方法 v0.1 beta **/
var search = (function () {
    var _search = location.search, // 保存当前 search 值
        _cache = {}, // 用于缓存各个参数
        arr, tmp;
 
    if (_search.indexOf("?") != -1) { // 如果有 search 就进行提取
        arr = _search.slice(1).split("&"); // 按 & 分割 search 字符串
 
        for(var i=0,l=arr.length; i<l; i++) { // 遍历数组
            if (arr[i].indexOf("=") == -1) { // 如果不存在 = 就赋为空值 (为了兼容)
                _cache[arr[i]] = "";
            } else {
                tmp = arr[i].split("="); // 分割字符串并且保存
                _cache[tmp[0]] = tmp[1];
            }
        }
    }
 
    /**
     * search 函数
     * @param key srting|object 参数名或者参数键值对对象
     * @param val string|null 参数值,为null时删除该参数
     * @return string|search 返回参数名的对应值 或 返回函数本身(用于链式调用)
     */
    function search(key, val) { // search 函数
        if(val === null) { // 如果val为null时，删除该值
            delete _cache[key];
        } else if(typeof key === "object") { // 如果key为object时遍历键值对 对象
            for(var k in key){
                search(k, key[k]);
            }
        } else if (val === undefined) { // 如果没有传入val则返回该key对应的值
            return _cache[key] ? decodeURIComponent(_cache[key].replace(/\+/g, " ")) : null;
        } else { // 如果都没有特殊情况就把值存入缓存变量中
            _cache[key] = encodeURIComponent(val);
        }
         
        return search; // 返回 search 函数之身，用于链式调用，方便设置值后取值用
    }
 
    /**
     * 取修改后的 search 字符串 函数
     * @return string 返回 search 字符串
     */
    search.valueOf = search.toString = search.val = function(){
        var _arr = []; // 临时数组
        for(var k in _cache) { // 遍历缓存对象
            _arr.push(k + "=" + _cache[k]); // 把健值对用=相连
        }
        return _search ? "?" + _arr.join("&") : ""; // 返回结果
    }
 
    return search; //重写 search 变量
})();
 
 
// 取值操作
var s1 = search("参数"); // 取 参数 对应的值
var s2 = search.val(); // 取整个url的 search 字符串 (兼容性好)
var s3 = search; // 取整个url的 search 字符串 (可能兼容性不是很好)
 
// 设置操作
search("参数", "值"); // 设置参数
search("参数1", "值1")("参数2", "值2"); // 设置参数
search({"参数1": "值1", "参数2": "值2"}); // 设置参数
search({"参数1": "值1", "参数2": "值2"})("参数3", "值3"); // 设置参数
 
// 删除操作
search("参数", null);
search({"参数1":null, "参数2":null})("参数2", null);
 
// 混合应用
search({"参数1": null, "参数2": "值2"}); // 键值对对象时，可以删除也可以设置键值对
var ret = search({"参数1": null, "参数2": "值2"})("参数3", null)("参数4", "值4").val(); // 操作完后可以接取值

压缩后

/** location.search 操作方法 v0.1 min beta **/
var search=function(){function g(a,c){if(null===c)delete b[a];else if("object"==typeof a)for(var d in a)g(d,a[d]);else{if(void 0===c)return b[a]?decodeURIComponent(b[a].replace(/\+/g," ")):null;b[a]=encodeURIComponent(c)}return g}var c,d,a=location.search,b={};if(-1!=a.indexOf("?")){c=a.slice(1).split("&");for(var e=0,f=c.length;f>e;e++)-1==c[e].indexOf("=")?b[c[e]]="":(d=c[e].split("="),b[d[0]]=d[1])}return g.valueOf=g.toString=g.val=function(){var c=[];for(var d in b)c.push(d+"="+b[d]);return a?"?"+c.join("&"):""},g}();

在控制器里

$id = $_GET['id'];//判断点击哪一列
        $or = $_GET['order'];//获取倒序还是顺序
        $order = "";
        switch($or){
            case 0:
                switch($id){
                    case 'url':
                        $order .= " order by url ";
                        break;
                    case 'n_visit':
                        $order .= " order by n_visit ";
                        break;
                    case 'area_id' :
                        $order .= " order by area_id ";
                        break;
                }
                $or = 1;
                break;
            case 1:
                switch($id){
                    case 'url':
                        $order .= " order by url desc";
                        break;
                    case 'n_visit':
                        $order .= " order by n_visit desc";
                        break;
                    case 'area_id' :
                        $order .= " order by area_id desc";
                        break;
                }
                $or = 0;
                break;
        }
$this->render("jump",array('id'=>$id,
            'order' => $or
        ));