I have datatable that I am using to display data for all assets from database. In this table I want to put a link to a field which can open modal popup which can display data from another datatable with selected fields. I check similar questions in forum but mostly all having modal popup for same table where they want to open it. But in my case I want to open modal popup of another table in my page using link.
Please direct me to right direction by providing any working example and reference documents.
Here is my code so far.
Table 1 - where I applied Link to table field called - scadaPoints
var table = $('#assyntCx_Table').DataTable( {
dom: 'lBfrtip',
serverSide: true,
processing: true,
ajax: {
url: "../ajax/at/assets_ss.php",
type: "POST",
deferRender: true,
},
//TABLE WINDOW
scrollY: "65vh",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
left: 2
},
columns: [
{ data: "id" },
{ data: "designTag", className: "dt-nowrap", },
{ data: "specTag", className: "dt-nowrap", },
{ data: "loc", className: "dt-nowrap", },
{ data: "building", className: "dt-nowrap", },
{ data: "room", className: "dt-nowrap editable", },
{ data: "level", className: "dt-nowrap editable", editField: "A.levels", },
{ data: "assetType", className: "dt-nowrap editable", editField: "A.assetType",},
{ data: "entity", className: "dt-nowrap editable", editField: "A.entity",},
{ data: "design", className: "dt-nowrap editable", },
{ data: "assetStatus", className: "dt-nowrap editable", editField: "A.assetStatus", },
{ data: "oldID", className: "dt-nowrap editable", },
{ data: "PR", className: "dt-nowrap", },
{ data: "SR", className: "dt-nowrap", },
{ data: "subsystem", className: "dt-nowrap", },
{ data: "discipline", className: "dt-nowrap", },
{ data: "PICO", className: "dt-nowrap", },
{ data: "SAT", className: "dt-nowrap", },
// This is the field where I want to apply Link to open Modal popup
{ data: "scadaPoints",
className: "dt-nowrap dt-center",
render: function ( data, type, row) {
if ( type === 'display' || type === 'filter' ) {
if(data != "0"){
return '<a href="#" data-toggle="modal" data-target="#scadaModal">'+data+'</a>';
// I tried to made button instead link to try below code but its not working
//return '<button class="btn btn-primary" data-toggle="modal" data-loopNo="'+row.loopNo+'" data-scadatag="'+row.scadatag+'" data-target="#scadaModal">'+data+'</button>'
}else{
return '';
}
//../asset/scadapoints.php?assetID='+row.id+'
}
if(data != "0"){
return data;
}
else{
return '';
}
},
},
{ data: "U.username", className: "dt-nowrap editable", editField: "A.bic",},
{ data: "assetPhase", className: "dt-nowrap editable", editField: "A.phase",},
{ data: "seq", className: "dt-nowrap editable", },
{ data: "comment", className: "editable", },
],
Table 2 - the data of this table I want to display on modal popup. on this table I made modal and try out some code which is not working.
<div class="container-fluid ms-7 w-auto">
<div class="card">
<div class="card-body">
<div id='phaseTable' class='content'>
<table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
<thead>
<tr>
<th data-priority="10" class='text-center'>Loop Number</th>
<th data-priority="10" class='text-center'>SCADA Tag</th>
<th data-priority="20" class='text-center'>Location</th>
<th data-priority="20" class='text-center'>Equipment Tag</th>
<th data-priority="20" class='text-center'>Asset Type</th>
<th data-priority="20" class='text-center'>Subsystem</th>
<th data-priority="20" class='text-center'>Level</th>
<th data-priority="20" class='text-center'>Room</th>
<th data-priority="20" class='text-center'>Service Description</th>
<th data-priority="30" class='text-center'>PLC ID</th>
<th data-priority="30" class='text-center'>Cabinet Tag</th>
<th data-priority="30" class='text-center'>Field End Terminated</th>
<th data-priority="30" class='text-center'>Marshalling Panel Terminated</th>
<th data-priority="30" class='text-center'>Comments</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<!-- Scada Model Popup -->
<div id="scadaModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">Scada Points Details</h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
$(document).ready(function() {
var table = $('#assyntCx_Table').DataTable( {
dom: 'lBfrtip',
ajax: {
url: "../ajax/at/scadapoints.php",
type: "POST",
deferRender: true,
},
//TABLE WINDOW
scrollY: "65vh",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
left: 2
},
columns: [
{ data: "A.loopNo", className: "dt-nowrap", },
{ data: "A.scadaTag", className: "dt-nowrap", },
{ data: "LocationName", className: "dt-nowrap", },
{ data: "T.assetTag", className: "dt-nowrap", },
{ data: "assetTypeName", className: "dt-nowrap", },
{ data: "systemName", className: "dt-nowrap", },
{ data: "levelTLA", className: "dt-center", },
{ data: "Room", className: "dt-center", },
{ data: "status", className: "dt-nowrap", },
{ data: "A.plcID", className: "dt-nowrap"},
{ data: "A.cabinetTag", className: "dt-nowrap"},
{ data: "FTerminated", className: "dt-center" },
{ data: "MPTerminated", className: "dt-center"},
{ data: "A.comments", className: "dt-nowrap", },
],
//SHOW SELECTION & SAVE PREVIOUS STATE
select: true,
stateSave: false,
//DISABLE AUTOWIDTH
"autoWidth" : false,
//BUTTONS
buttons: [],
//PAGINATION OPTIONS
pageLength: 250,
lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],
initComplete: function() {
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();
}
});
});
}
} );
// SCADA MODEL
$("#scadaModal").on('show.bs.modal', function (e) {
var triggerLink = $(e.relatedTarget);
var loopNo = triggerLink.data("A.loopNo");
var scadatag = tiggerLink.data("A.scadaTag");
$("#modalTitle").text(title);
$(this).find(".modal-body").html("<td>Loop No: "+loopNo+"</td><td>Scada Tag: "+scadatag+"</td>");
});
});
