選擇事件不會觸發單擊時在行數據

Question

我的表已經定義了選擇和取消處理程序工作正常，當用戶點擊了空格在一排。但是，如果用戶單擊某些文本（創建表中定義的span標籤），則從不觸發該事件。

爲了解決這個問題，我試圖設置一個行點擊事件處理程序，它檢查該行具有「選擇」或不然後手動觸發在所述行的相應的去/選擇事件的CSS屬性。當點擊了文字，但不幸的是不是連續點擊了空格的時候，因爲這兩個事件被觸發，而不是預期的問題的解決方案效果很好。

任何想法來處理呢？

/* 
*/ 
function createTable(){ 

    if(table != null){//Si la tabla ya existe: eliminamos filas y la destruimos. 
     table.destroy(); 
     $('#'+tableID).empty(); 
    } 

    table = $('#' + tableID).DataTable({ 
     "dom": 'Bfrtip', 
     "buttons": ['selectAll','selectNone'], 
     "columnDefs": [{ 
      "render": function(data, type, row){ 
       return '<span class="label bg-info">' + data + '</span>'; 
      }, 
      "targets": 1 
     }, 
     { 
      "render": function(data, type, row){ 
       return '<span class="column1">' + data + '</span>'; 
      }, 
      "targets": 0 
     }], 
     "select": {style: 'multi'}, 
     "data": rows, 
     "columns": columns, 
     "destroy": true 
    }); 

    table.off('select').on('select', handlerRowsSelection); 
    table.off('deselect').on('deselect', handlerRowsDeselection); 
    //table.off('click').on('click', 'tr', handlerRowClickEvent); 
} 

/* 
*/ 
function handlerRowClickEvent(){ 
    if ($(this).hasClass('selected')) { 
     table.row(this).deselect(); 
    } 
    else { 
     table.row(this).select(); 
    } 
} 

/* 
*/ 
function handlerRowsSelection(e, dt, type, indexes){ 
    if(type=="row"){ 
     //DOING SOMETHING 
    } 
} 

/* 
*/ 
function handlerRowsDeselection(e, dt, type, indexes){ 
    if(type=="row"){ 
     //DOING SOMETHING 
    } 
} 

Answer 1

下面是關於codepen的一個基本示例，不知道爲什麼你的工作不正常。嘗試每次更改一個代碼，以獲得您所擁有的內容，這可能有助於確定問題的原因。

http://codepen.io/carltondickson/pen/VaQzyM

HTML

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </tfoot> 
    <tbody> 
    <tr> 
     <td>Tiger Nixon</td> 
     <td>System Architect</td> 
     <td>Edinburgh</td> 
     <td>61</td> 
     <td>2011/04/25</td> 
     <td>$320,800</td> 
    </tr> 
    <tr> 
     <td>Garrett Winters</td> 
     <td>Accountant</td> 
     <td>Tokyo</td> 
     <td>63</td> 
     <td>2011/07/25</td> 
     <td>$170,750</td> 
    </tr> 
    </tbody> 
</table> 

CSS

https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css

JS

https://code.jquery.com/jquery-1.12.0.min.js

https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js

$(document).ready(function() { 
    var t = $('#example').DataTable({ 
     select: {style: 'multi'} 
    }); 
    t.off("select").on("select", function(e, dt, type, indexes) { 
     console.log("Selected"); 
     console.log(e, dt, type, indexes); 
    }); 
    t.off("deselect").on("deselect", function(e, dt, type, indexes) { 
     console.log("Deselected"); 
     console.log(e, dt, type, indexes); 
    }); 
});