表格點擊某列排序

對於表格點擊列進行排序，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
        ));