數據表1.10僅通過排序排序圖標排序

我正在使用datatables版本1.10。我有次點擊時的分類圖標（向上和向下箭頭）排序應該工作服務器端數據表1.10僅通過排序排序圖標排序

其中

點擊時的要求，排序應該工作locally.This是因爲誤THEAD用戶點擊和服務器獲得不必要的負擔。

目的： 我想保持這兩個

本地排序[點擊THEAD沒有圖標]（僅適用於目前在桌面顯示器/頁數據）
服務器端排序[只點擊圖標]。

該問題： 數據表使用的CSS背景圖像進行排序。這使得很難檢測點擊圖標，因爲根據我的知識，點擊無法捕獲CSS背景圖像。

這就是我想出了，但仍沒有任何進展

的jsfiddle：http://jsfiddle.net/bababalcksheep/mae29pau/10/

JS：

$(document).ready(function() { 
    //http://www.datatables.net/reference/api/ 
    var url = "http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2"; 
    // 
    $('th').on("click.DT", function (event) {  
     event.stopImmediatePropagation(); 
    }); 

    var table = $('#example').DataTable({ 
     "processing": true, 
      "serverSide": false, 
      "ajax": url 
    }); 
    // 
    //$('th').off('click.DT'); 
    // sort internally 
    table.column('2').order('asc'); 
});

UPDATE-1：

的jsfiddle： http://jsfiddle.net/bababalcksheep/mae29pau/14/

我能夠通過添加一個sortMask提前一步，然後綁定一個點擊它。 sortMask是ID添加到每列一個div <thead> -> <tr> -> <th>

enter image description here CSS：

.sortMask { 
    width:19px; 
    height:19px; 
    float:right; 
    display:inline-block; 
    z-index:0; 
    margin-right: -19px; 
    /*background:red;*/ 
}

JS：

$('th').on("click.DT", function (e) { 
     //stop Propagation if clciked outsidemask 
     //becasue we want to sort locally here 
     if (!$(e.target).hasClass('sortMask')) { 
      e.stopImmediatePropagation(); 
     } 
    });

來源

2014-12-05 django

BTW儘量讓客戶做出這種事情，因爲如果你有多個用戶點擊排序服務器將有一個不必要的負擔。 – 2014-12-05 14:46:40

你可以插入圖標像** **然後點擊圖標，發送給服務器，然後** $（'。sendToServer '）.on（'click'，function（e）{//服務器端編碼; e.stopPropogation（）;}）**和任何地方的除了圖標，如果他點擊它將得到正常排序 – Alok 2014-12-05 14:46:55

點擊表標題排序是正常預期的用戶行爲和最常見的用戶界面。沒有意義的是，他們不小心這樣做 – charlietfl 2014-12-05 14:48:26

我覺得這裏更好的解決方案是將包裹文字不是圖標：

<th><div>First name <div>abc</div></div></th>

和：

$('th').on("click", function (event) { 
    if($(event.target).is("div")) 
     event.stopImmediatePropagation(); 
});

請注意：你應該使用正常click甚至代替click.DT因爲在這種情況下，它會DataTables一個之前被解僱。

http://jsfiddle.net/mae29pau/38/

來源

2015-08-03 07:31:20

數據表1.10僅通過排序排序圖標排序

回答

相關問題