Создание строк таблицы, доступных на всех страницах JQuery DataTables

Итак, у меня есть реализация плагина dataTables с разбиением на страницы. Я хочу, чтобы мода загружалась, когда я нажимаю на любую строку в таблице. Пока я могу заставить модальную работу, когда я нажимаю строки на первой странице. Но как только я перехожу на следующую страницу, ни одна из строк не может быть нажата.Создание строк таблицы, доступных на всех страницах JQuery DataTables

Это то, что я до сих пор:

$(document).ready(function() { 
     $("tr").click(function(){ 
      $('#myModal').modal('show'); 
     }); 
    });

У меня есть ощущение, что это может быть сделано с помощью DataTables функций API, но моя неопытность держит меня обратно. Каков самый простой способ сделать это?

источник

2013-02-27 theBookeyMan

привет, добро пожаловать в сообщество. Отправьте свой html также – Shail

Посмотрите на пример fnGetData на этой странице

http://www.datatables.net/api

// 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 
    }); 
});

при сохранении данных в вашем модальный и закрыть его, просто перезагрузите DataTable ...

You действительно нужно посмотреть документацию api, все есть .. действительно

источник

2013-02-27 16:55:58

Спасибо. Не возражаете ли вы объяснить мне, почему я не могу использовать «tr»? – theBookeyMan

@ theBookeyMan В таблице с разбивкой по страницам нет всех его строк в DOM при загрузке страницы; только первая страница строк таблицы находится в DOM в этой точке, а DataTables динамически добавляет/удаляет строки из DOM по мере вашей страницы через вашу таблицу. Ваше событие click не привязано к этим динамически созданным строкам, поскольку они еще не существуют в DOM. Вместо этого вы должны сказать jQuery, чтобы прослушать элемент, который существует _does_, и не удаляется/не заменяется во время разбивки на страницы, а именно на тело таблицы. – Liv

Хорошо, что имеет смысл. Если jQuery прослушивает весь элемент tbody, может ли он различать строки таблицы? Я хочу отдельный модальный для каждой строки. – theBookeyMan

Поскольку никто не опубликовал окончательный ответ, я слежу за ним Это связано с тем, что у меня была такая же проблема.

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 
    } 
    });

источник

2013-11-26 21:25:19 thepriebe

Используйте делегированного событие:

$('#myTable tbody').on('click', 'tr', function() { ... });

См http://datatables.net/faqs#events для получения дополнительной информации.

источник

2013-11-27 10:40:38

Создание строк таблицы, доступных на всех страницах JQuery DataTables

ответ

Смежные вопросы