因此，我已經實現了帶有分頁的dataTables插件。我想要一個引導模式出現，當我點擊表中的任何一行。到目前爲止，當我單擊第一頁上的行時，我可以使模態工作。但是一旦我進入下一頁，沒有任何行可以點擊。在JQuery數據表的所有頁面上單擊表格行可以點擊
這是我到目前爲止有：
$(document).ready(function() {
$("tr").click(function(){
$('#myModal').modal('show');
});
});
我有一種感覺，這可以通過使用數據表API函數來完成，但我的經驗不足是抱着我。這樣做的最簡單方法是什麼？
看看在fnGetData例如，此網頁上
// Row data
$(document).ready(function() {
oTable = $('#example').dataTable();
oTable.$('tr').click(function() {
var data = oTable.fnGetData(this);
// populate your modal with the data from data variable which is the data that the row contains
//show your modal
});
});
當您保存在你的模態數據，並關閉它，只需重新加載數據表...
你真的需要看看api文檔，一切都在那裏..真的
謝謝。你介意給我解釋爲什麼我不能使用「tr」？ – theBookeyMan 2013-02-27 17:06:35
@theBookeyMan當頁面加載時，分頁表格沒有在DOM中的所有行;只有表格行的第一頁位於DOM中，並且在您翻閱表格時DataTables會動態地添加/刪除DOM中的行。您的點擊事件不會綁定到這些動態創建的行，因爲它們不存在於DOM中。相反，你必須告訴jQuery監聽_does_存在的元素，並且在分頁期間不會刪除/替換，即表體。 – Liv 2013-02-27 19:07:10
好吧，這是有道理的。如果jQuery正在監聽整個tbody元素，它能區分表格行嗎？我想爲每一行分開模態。 – theBookeyMan 2013-02-27 21:08:37
由於沒有人真正發佈最終答案，我followin因爲我有同樣的問題。
COS.coupon.table_columns_titles = new Array();
COS.coupon.table_columns_titles.push({"sTitle": "Code"});
COS.coupon.table_columns_titles.push({"sTitle": "Status"});
COS.coupon.table_columns_titles.push({"sTitle": "Date"});
COS.coupon.table_columns_titles.push({"sTitle": "","sClass": "hide"});
$j('#listcoupons').dataTable({
"bProcessing":true,
'bJQueryUI': true,
'sPaginationType': 'full_numbers',
'oLanguage': {'sSearch': 'Filter:', 'sEmptyTable': 'Processing...'},
'aoColumns': COS.coupon.table_columns_titles,
"sScrollX": "100%",
"iDisplayLength": 10,
"bAutoWidth": false
});
...
// So this is the on click. I'm referencing the tbody because it's there
// throughout all the pagination.
$j("table#listcoupons tbody").on("click", function(event) {
...
// This is how I'm refering the specific item I wanted.
// Then I do get the id from the hidden column.
$j(event.target).closest('tr').children('td').eq(1).text()
整體上單擊事件看起來是這樣的雜交。
$j("table#listcoupons tbody").on("click", function(event) {
if ($j(event.target).closest('tr').children('td').eq(1).text() == 'Used') {
// do some stuff/show a dialog
} else {
// do some other stuff/show a different dialog
}
});
使用委派事件：
$('#myTable tbody').on('click', 'tr', function() { ... });
嘿哥們歡迎來到社區。發佈你的html以及 – Shail 2013-02-27 16:56:00