jQuery dataTables和選擇一行

Question

我想要得到一個jQuery dataTable行爲的方式，用戶可以選擇一行，然後單擊一個按鈕（位於頁面上的其他位置，但而不是在表或中它）並彈出一個JS警報。

這裏是我的dataTable：

$("#my-datatable").dataTable({ 
    "bProcessing" : true, 
    // Commenting out next line 
    //"sDom" : 't', 
    "sAjaxSource" : "some/url/on/my/server", 
    "sAjaxDataProp" : "", 
    "bDestroy" : true, 
    "fnServerData" : function(sSource, aoData, fnCallback) { 
     aoData.push({ 
      "name" : "asking", 
      "value" : "yes" 
     }); 

     request = $.ajax({ 
      "dataType" : "json", 
      "type" : "GET", 
      "url" : sSource, 
      "data" : aoData, 
      "success" : fnCallback 
     }); 
    }, 

    "aoColumns" : [ 
     { 
      "mDataProp" : "name" 
     }, 
     { 
      "mDataProp" : "expr" 
     }, 
     { 
      "mDataProp" : "seq" 
     } 
    ] 
}); 

這裏是我的按鈕：

<div id="bam-btn-div"> 
    <input type="button" id="bam-btn" value="BAM!" onclick="bam();"/> 
</div> 

當用戶在DataTable中選擇一個行，然後點擊按鈕，我想叫下面的函數：

function bam() { 
    alert("Deleting the selected row"); 

    // Delete the selected row in the dataTable 
} 

最後，jQuery dataTable試圖填充的HTML表格：

<div id="datatable-div"> 
    <table id="optconfig-datatable"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Expression</th> 
       <th>Sequence</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 

我試圖按照here的例子，但沒有得到任何工作。任何人都可以找到我需要添加的配置（對數據表和/或其他）嗎？提前致謝！

Answer 1

請檢查您：

function bam() { 
    alert("BAM!"); 
} 

是不是在此聲明：

$(document).ready(function() { 
    // STATEMENT 
}); 

如果你的函數是在$(document).ready()，這意味着它僅在該範圍內的可用，在那個特定的function() 。

移動你的代碼的上方或下方$(document).ready()聲明，並在你的按鈕你onclick事件處理程序將能夠找到它，並調用它。

若要從數據表中刪除特定的元素，嘗試用這個JavaScript：

$(document).ready(function() { 
    var oTable = $("#my-datatable").dataTable({ 
     "bProcessing" : true, 
     // Commenting out next line 
     //"sDom" : 't', 
     "sAjaxSource" : "some/url/on/my/server", 
     "sAjaxDataProp" : "", 
     "bDestroy" : true, 
     "fnServerData" : function(sSource, aoData, fnCallback) { 
      aoData.push({ 
       "name" : "asking", 
       "value" : "yes" 
      }); 

      request = $.ajax({ 
       "dataType" : "json", 
       "type" : "GET", 
       "url" : sSource, 
       "data" : aoData, 
       "success" : fnCallback 
      }); 
     }, 

     "aoColumns" : [ 
      { 
       "mDataProp" : "name" 
      }, 
      { 
       "mDataProp" : "expr" 
      }, 
      { 
       "mDataProp" : "seq" 
      } 
     ] 
    });$("#my-datatable").dataTable({ 
     "bProcessing" : true, 
     // Commenting out next line 
     //"sDom" : 't', 
     "sAjaxSource" : "some/url/on/my/server", 
     "sAjaxDataProp" : "", 
     "bDestroy" : true, 
     "fnServerData" : function(sSource, aoData, fnCallback) { 
      aoData.push({ 
       "name" : "asking", 
       "value" : "yes" 
      }); 

      request = $.ajax({ 
       "dataType" : "json", 
       "type" : "GET", 
       "url" : sSource, 
       "data" : aoData, 
       "success" : fnCallback 
      }); 
     }, 

     "aoColumns" : [ 
      { 
       "mDataProp" : "name" 
      }, 
      { 
       "mDataProp" : "expr" 
      }, 
      { 
       "mDataProp" : "seq" 
      } 
     ] 
    }); 

    $('button#bam-btn').on('click', function() { 
     var anSelected = fnGetSelected(oTable); 
     oTable.fnDeleteRow(anSelected[0]); 
    }); 
}); 

Answer 2

您正在使用jQuery，你還不如留在軌道。

$('#bam-btn').on('click', function(){ 
    alert("BAM!"); 
}); 

在一個側面說明，ID必須是唯一的，但我敢肯定你知道，所以一定要確保你不會試圖一遍又一遍重複使用相同的ID。此外，如果在執行.ready()後將此元素添加到DOM中，則需要將事件處理程序附加到靜態父元素，以便它可以正確委派click事件。

$(document).on('click', '#bam-btn', function(){ 
    alert("BAM"); 
}); 

我將離開上述的地方，我不喜歡刪除我的回答的所有部分，你永遠不知道誰可能會發現它的幫助在未來

首先，我們需要創建一個可用於所有函數的所有範圍的變量。這樣，我們可以引用變量來獲取我們想要移除的元素。

我們應該把這個變量以外的文件準備功能

var theRow = ''; 
$(document).ready(function(){ 
    //existing code here 
}); 

現在，我們有一個「全球範圍內」變量準備，我們可以修改它，隨時隨地訪問它。

var theRow = ''; 
$(document).ready(function(){ 
    $('tr').click(function(){ 
     //we need to store a unique piece of information about this row. 
     //Without much to go on, I'm going to rely on the index. 
     theRow = $(this).index(); 
    }); 

    $('#bam-btn').click(function(){ 
     $('tr').eq(theRow).remove(); 
    }); 
});​ 

And here is your decent working jsFiddle as an example

對於未來的用戶，其他人誰可以找到jQuery的提供不能槓桿.querySelectorAll()獲得一個體面的大的性能提升這個有用

的:eq()選擇。因此，目前，您應該始終使用.eq()而不是:eq()。

Answer 3

我有一個與動態數據加載表類似的問題。每次我添加內容時，舊節點都會消失，失去了鏈接的事件。 我解決了數據加載後調用函數的問題：

function insertevents(table_id){ 
     var oTable = jQuery('#'+tableid).dataTable({"bRetrieve": true }); 
     oTable.$('tr').click(function(){ 
      jQuery(this).toggleClass('row_selected'); 
     }); 
     // Extra code here 
    } 

它，因爲該表之前被初始化添加「bRetrieve」參數是非常重要的。

另外，我改進了功能控制鍵盤事件的可訪問性：

 oTable.$('tr').keyup(function(event) { 
      if (event.which == 13 || event.which == 32) { 
       event.preventDefault(); 
       jQuery(this).toggleClass('row_selected'); 
      }  
     }); 
     oTable.$('tr').keydown(function(event) { 
      if (event.which == 13 || event.which == 32) { 
       event.preventDefault(); // Desactivamos este efecto 
      } 
     }); 

這一堆線應更換第一個例子中的註釋行。現在可以在鍵盤上使用表格，使用介紹或空格鍵進行選擇。請記住將tabindex = 0添加到表中插入的元素，以便我們可以使用Tab鍵導航。

Answer 4

http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html

這類似於你想要什麼。