In node red I'm able to load datatable now but style is being overridden by nodered.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script>
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.deviceId+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.cameraId+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": 'https://api.myjson.com/bins/16lp6',
scrollY: 250,
deferRender: true,
scroller: true,
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" },
{ "data": "extn", "visible": false }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function(){
var tr = $(this).closest('tr');
var row = table.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');
}
});
// Handle click on "Expand All" button
$('#btn-show-all-children').on('click', function(){
// Enumerate all rows
table.rows().every(function(){
// If row has details collapsed
if(!this.child.isShown()){
// Open this row
this.child(format(this.data())).show();
$(this.node()).addClass('shown');
}
});
});
// Handle click on "Collapse All" button
$('#btn-hide-all-children').on('click', function(){
// Enumerate all rows
table.rows().every(function(){
// If row has details expanded
if(this.child.isShown()){
// Collapse row details
this.child.hide();
$(this.node()).removeClass('shown');
}
});
});
});
</script>
<style>
td.details-control {
background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center;
}
#btn-show-all-children{
color: black;
width: 49.5%;
border-radius: 2px;
background-color: #AD1625;
}
#btn-hide-all-children{
color: black;
width: 49.5%;
border-radius: 2px;
background-color: Green;
}
table, th , td {
border: 2px solid black;
border-collapse: collapse;
padding: 5px;
}
th{
bgcolor="#FF0000";
background-color: #6b6767;
color:white;
}
td{
background-color: #F1F1F1;
}
</style>
</head>
<body>
<button id="btn-show-all-children" type="button">Expand All</button>
<button id="btn-hide-all-children" type="button">Collapse All</button>
<hr>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
It is displaying like this in broser.
But it is being displaying like this, I tried to change width height of exapnad collapse buttons. td,th background and font color also I tried to change but it is not applying.
