У меня есть один набор данных с большим количеством кода, реализованного после initComplete, который хорошо работает при загрузке, но когда я нажимаю несколько страниц и возвращаюсь на страницу (я использую турболинки), datatable отображается нормально, но некоторые функции, такие как дочерние строки, действуютстранный.Например, когда я нажимаю на значок дочерней строки, он срабатывает дважды (я пробовал оповещение («тест»), чтобы увидеть, что он делает) или детальный поиск не работает и не работает вообще.Есть ли какое-либо решение, как правильно загрузить данные с турболинками, чтобы все вещи работали как свежо загруженные?Если я делаю F5 в браузере, все работает хорошо, конечно.Вот код
ready = function() {
missionstable= $('#guildmissions').DataTable({
'order': [0, 'desc'],
'serverSide': true,
'destroy' :true,
'stateSave' :true,
'ajax' : '/guildmissions/'+<%=@guild.id%>+'.json',
columns: [
{data: 'fy'},
{data: 'associate_email' },
{data: 'guild_name' },
{data: 'coordinator_email' },
{data: 'name' },
{data: 'q1_status' },
{data: 'q2_status' },
{data: 'q3_status' },
{data: 'status' },
{data: 'accepted',"searchable": false,'render' : function(data,type,row) {
var $accepted = '<i class="fa fa-exclamation-circle fa-2x" aria-hidden="true"></i>';
if (row.accepted == true) {$accepted = '<i class="fa fa-check-square-o fa-2x check-ok-green" aria-hidden="true"></i>';}
return $accepted;
}},
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '<center><i class="fa fa-chevron-down fa-2x" aria-hidden="true"></i></center>'
},
<% if (find_user_role == "admin") %>
{data: 'edit_mission',"orderable": false, "searchable": false},
{data: 'delete_mission',"orderable": false, "searchable": false}
<% elsif (find_user_role == "coordinator") %>
{data: 'edit_mission',"orderable": false, "searchable": false,'render' : function(data,type,row) {
if ($.inArray(<%= get_current_user_associate_id%>, row.guild_coordinators) != -1 ) {
return row.edit_mission
}
else {return row.no_edit_mission}
}
},
{data: 'delete_mission',"orderable": false, "searchable": false,'render' : function(data,type,row) {
if ($.inArray(<%= get_current_user_associate_id%>, row.guild_coordinators) != -1 ) {
return row.delete_mission
}
else {return row.no_delete_mission}
}
}
<% else %>
{data: 'no_edit_mission',"orderable": false, "searchable": false},
{data: 'no_delete_mission',"orderable": false, "searchable": false}
<% end %>
],
'dom': 'lfr<"pull-right"B>tip',
'buttons': [
{"extend" : 'copyHtml5',"text":"Copy","className": 'btn btn-default btn-xs'},
{"extend" : 'excelHtml5',"text": "XLS","className": 'btn btn-default btn-xs'},
{"extend" : 'csvHtml5',"text": "CSV","className": 'btn btn-default btn-xs'},
{
text: 'TXT',
extend: 'csvHtml5',
fieldSeparator: '\t',
extension: '.txt',
"className": 'btn btn-default btn-xs'
},
{"extend" : 'pdfHtml5',"text": "PDF","className": 'btn btn-default btn-xs'},
],
'lengthMenu': [
[10, 50,100, -1],
[10, 50,100, "All"]
],
"rowCallback" : function(row, data, index) {
var q1_status = data["q1_status"]
var q1_datestat = data["q1_datestat"]
var q2_status = data["q2_status"]
var q2_datestat = data["q2_datestat"]
var q3_status = data["q3_status"]
var q3_datestat = data["q3_datestat"]
var q4_status = data["status"]
var q4_datestat = data["fye_datestat"]
if (q1_status == 'Q1 not started' && q1_datestat == 'nok') {
$("td:eq(5)",row).addClass("redtablealert");
}
if (q2_status == 'Q2 not started' && q2_datestat == 'nok') {
$("td:eq(6)",row).addClass("redtablealert");
}
if (q3_status == 'Q3 not started' && q3_datestat == 'nok') {
$("td:eq(7)",row).addClass("redtablealert");
}
if (q4_status == 'Q4 not started' && q4_datestat == 'nok') {
$("td:eq(8)",row).addClass("redtablealert");
}
}
,
initComplete: function ()
{
if ( $("#detailbutton_guild_mission").length) {console.log ('detailed search exists');}
else {
var r = $('#guildmissions tfoot tr');
r.find('th').each(function(){
$(this).css('padding', 8);
});
$('#guildmissions thead').append(r);
$('#search_0').css('text-align', 'center');
$("#guildmissions_filter").append('<button id="detailbutton_guild_mission" class="btn btn-primary btn-outline btn-xs" type="button"><span class="bold">Detailed search</span></button>');
$('#changepageinput').val('');
var api = this.api();
// Apply the search
api.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
$('#tab-4').on('click', '#detailbutton_guild_mission', function() {
//$('#detailbutton_guild_mission').click(function() {
$('#tabledetailsearch').toggleClass('visibility');
});
$('#changepageinput').on('keyup change',function() {
if (parseInt($('#changepageinput').val()) > 0) {
var pagenum = (parseInt($('#changepageinput').val()) -1);
listContable.page( pagenum ).draw( false );
}
else {listContable.page( 0 ).draw( false );}
});
}
//childrows
function format(d) {
if (d.associate_id == <%= get_current_user_associate_id %>) {
if (d.accepted == false) {
$acceptance = '<div class="row"><button id="'+d.id+'" class="btn btn-primary accept_changes">Accept Mission</button></div>';
}
else {$acceptance = '<i class="fa fa-check-square-o fa-2x check-ok-green" aria-hidden="true"></i>Mission accepted';}
}
else {$acceptance = '';}
$html = '<div class="col-lg-12"><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Eighty</div><div class="panel-body" ><p id="eighty">'+d.eighty+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q1 output</div><div class="panel-body" ><p id="q1out">'+d.q1_output+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q2 output</div><div class="panel-body" ><p id="q2out">'+d.q2_output+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q3 output</div><div class="panel-body" ><p id="q3out">'+d.q3_output+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q4 output</div><div class="panel-body" ><p id="q4out">'+d.fye_output+'</p</div></div></div></div>'+$acceptance+'</div>';
return $html;
};
$('#guildmissions tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = missionstable.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data())).show();
tr.addClass('shown');
//loaddetails(row.data());
$.ajax({
url: "/lastmissionhistory/"+row.data().id,
cache: false,
type: "GET",
dataType: "json",
timeout:3000,
success : function (data) {
$eighty_obj = data.find(o => o.changed_field === 'eighty');
$q1out_obj = data.find(o => o.changed_field === 'q1_output');
$q2out_obj = data.find(o => o.changed_field === 'q2_output');
$q3out_obj = data.find(o => o.changed_field === 'q3_output');
$q4out_obj = data.find(o => o.changed_field === 'fye_output');
if (typeof $eighty_obj !== "undefined") {
$("#eighty").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#eighty_history' aria-expanded='false' aria-controls='eighty_history'>Show previous value edited by "+$eighty_obj.email+" at "+ prettyDate($eighty_obj.updated_at)+ "</a></h4></div><div id='eighty_history' class='panel-collapse collapse'><div class='panel-body'>"+$eighty_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q1out_obj !== "undefined")&&($q1out_obj.old_value !== '')) {
$("#q1out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q1_history' aria-expanded='false' aria-controls='q1_history'>Show previous value edited by "+$q1out_obj.email+" at "+ prettyDate($q1out_obj.updated_at)+ "</a></h4></div><div id='q1_history' class='panel-collapse collapse'><div class='panel-body'>"+$q1out_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q2out_obj !== "undefined")&&($q2out_obj.old_value !== '')) {
$("#q2out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q2_history' aria-expanded='false' aria-controls='q2_history'>Show previous value edited by "+$q2out_obj.email+" at "+ prettyDate($q2out_obj.updated_at)+ "</a></h4></div><div id='q2_history' class='panel-collapse collapse'><div class='panel-body'>"+$q2out_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q3out_obj !== "undefined")&&($q3out_obj.old_value !== '')) {
$("#q3out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q3_history' aria-expanded='false' aria-controls='q3_history'>Show previous value edited by "+$q3out_obj.email+" at "+ prettyDate($q3out_obj.updated_at)+ "</a></h4></div><div id='q3_history' class='panel-collapse collapse'><div class='panel-body'>"+$q3out_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q4out_obj !== "undefined")&&($q4out_obj.old_value !== '')) {
$("#q4out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q4_history' aria-expanded='false' aria-controls='q4_history'>Show previous value edited by "+$q4out_obj.email+" at "+ prettyDate($q4out_obj.updated_at)+ "</a></h4></div><div id='q4_history' class='panel-collapse collapse'><div class='panel-body'>"+$q4out_obj.old_value+ "</div></div></div></div>" );
}
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
alert("Error " + errorThrown);
if(textStatus==='timeout')
alert("request timed out");
}
});
$('.accept_changes').on('click',function(event){
//console.log(event.target.id);
$mission_id = event.target.id;
$.ajax({
type: "POST",
url: "/accept_mission",
data: {mission_id: $mission_id},
success:function(data){
if (data.status == "ok")
{
alert("Mission was accepted" );
missionstable.ajax.reload();
}
else { alert("Error");}
}
});
});
}
} );
}
});
$('#guildmissions tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input style="width:100%" type="text" placeholder="Search" />' );
} );
$('.disabled_search').html( '<input style="max-width:30px" disabled type="text" />' );
};
$(".guilds.showguild").ready(ready);
document.addEventListener('turbolinks:before-cache', function() {
if ($('#guildmissions_wrapper').length ==1) {missionstable.destroy() ; }
});
$(".guilds.showguild").on('turbolinks:load', ready);