Доброго дня!
Использую datatables jquery у себя в проекте. У них есть удобная фича Row details (
https://datatables.net/examples/serv...w_details.html)
когда при нажатии на + в строке открывается контейнер. Я переписал под свои нужды и теперь при нажатии на details открывается еще один datatables. Во второй таблице я так же реализовал row details и хочу, чтобы при нажатии открывалась третья таблица, но почему-то не получается сделать события клика уникальными для каждой из таблиц. То есть при нажатии на детали во второй таблице, срабатывает обработчик сначала нужный мне, а потом для первой таблицы.
Собственно как сделать два этих события уникальными для каждой из таблиц?
Привожу примеры кода, спасибо.
Контейнер для первой таблицы
<table id="contracts" class="display" cellspacing="0" width=""</table>
Инициализация первой таблицы + обработчик mainTable.on('click')
$(document).ready(function() {
'use strict';
mainTable = $('#contracts').DataTable({
"iDisplayLength": 100,
"autoWidth": false,
"language": {
"emptyTable": "Ошибка загрузки"
},
"ajax" : {
"url" : "Servlet",
"dataSrc" : "tenants",
"type" : "POST"
},
columns: [
{
"targets": 0,
"data": null,
"defaultContent": "<input id = 'redact' type='image' onchange='' style='width: 30px;height: 30px;' src='images/edit.png' name='delete'>"
},
{ title: "Имя"},
{ title: "Фамилия" },
{ title: "ID" },
{
"targets": 0,
"data": null,
"defaultContent": "<input id = 'delete' type='image' onchange='' style='width: 30px;height: 30px;' src='images/delete.png' name='delete'>"
},
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
}
],
"order": [[ 1, "asc" ]],
"columnDefs": [
{"className": "dt-left", "targets": "_all"}
]
});
mainTable.on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = mainTable.row( tr );
alert("ok contracts");
if ( row.child.isShown() ) {
row.child.hide();
tr.removeClass('shown');
}
else
{
if ( mainTable.row( '.shown' ).length ) {
$('.details-control', mainTable.row( '.shown' ).node()).click();
}
var req = newXMLHttpRequest();
var data = row.data();
req.open("POST", "Servlet1", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + data[3]);
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
});
});
При нажатии на +(details) срабатывает функция с инициализацией второй таблицы.
Формируем div в который поместим нашу таблицу
function format () {
var d = document.createElement('div');
d.className='div_one';
document.body.appendChild(d);
$('.div_one').append('<table id="events" class="display" cellspacing="0" width="100%"></table>');
$('.div_one').append('<button style = "float:right;">Добавить договор</button>');
if(eventTable!=null)
eventTable.destroy();
eventTable = $('#events').DataTable({
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td', nRow).css('background-color', '#879aa2');
},
"processing": true,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"pagingType": "simple",
"pageLength": 4,
"paging": false,
"autoWidth": false,
"stateSave": true,
"destroy" : true,
"language": {
"emptyTable": "Не загружено"
},
"ajax" : {
"url" : "Servlet2",
"dataSrc" : "data2",
"type" : "GET"
},
columns: [
{ title: "1", visible: false },
{ title: "2" },
{ title: "3" },
{ title: "4"},
{ title: "5" },
{ title: "6" },
{ title: "7"},
{ title: "8", visible: false},
{ title: "9"},
{ title: "10"},
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
}
],
"columnDefs":
[
{"className": "dt-center", "targets": "_all"}
]
});
Второй обработчик, срабатывает но затем вызывается обработчик
для первой таблицы...
eventTable.on('click', 'td.details-control', function () {
alert("ok events");
});
return document.getElementsByClassName("div_one");
}
Вообщем необходимо, что бы
eventTable.on('click', 'td.details-control', function () {
alert("ok events");
});
вызывался только для таблицы eventTable.
