Not sure where I've gone wrong, here's the issue:
Here's my code:
<?php
require 'config.php';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Vendor list - VendorBase Pro</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<!-- Bootstrap core CSS -->
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Light Bootstrap Table core CSS -->
<link href="assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel="stylesheet"/>
<link href="DataTables/DataTables-1.10.20/css/jQuery.dataTables.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<style>
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
td {
overflow:hidden;
table-layout: fixed;
max-width: 500px;
overflow-wrap:break-word;
}
</style>
<body>
</body>
<script>
function format ( d ) {
return '<table>'+
'<tr>'+
'<td><b>Business Owner:</b></td>'+
'<td>'+d.owner+'</b></td>'+
'</tr>'+
'<tr>'+
'<td><b>Contact Email:</b></td>'+
'<td>'+d.owner_email+'</td>'+
'</tr>'+
'<tr>'+
'<td><b>Description:</d></td>'+
'<td style="max-width=280px;">'+d.descr+'</td>'+
'</tr>'+
'<tr>'+
'<td>More Info:</td>'+
'<td><button>View</button></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var dt = $('#tblVendor').DataTable( {
"responsive": true,
"dom": 'Bfrtip',
"buttons":[
{ extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
{ extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
{ extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
{ extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' }
],
"processing": true,
"serverSide": true,
"ajax": "ajax.php",
'serverMethod': 'post',
"columns": [
{
"width": "5%",
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "name" },
{ "data": "company" },
{ "data": "type" },
{ "data": "status" },
{ "data": "owner", "visible": false},
{ "data": "owner_email", "visible": false},
{ "data": "descr", "visible": false},
{ "data": "dept" },
], "order": [[1, 'asc']],
} );
new $.fn.dataTable.Buttons( dt, {
buttons: [
{
className: 'btn btn-info btn-fill',
text: 'Add New Vendor',
action: function ( e, dt, node, conf ) {
window.location.replace("new.php");
},
},
]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#tblVendor'+id+' td.details-control').trigger( 'click' );
} );
} );
dt.buttons( 1, null ).container().appendTo(
dt.table().container()
);
} );
</script>
I have literally tried everything, even searching through CSS (no changes permanently made) and making changes to color schemes and what not. There literally is nothing that has worked so I'm reaching out to you guru's to see where I'm going wrong. I'm hoping it's just a silly oversight and no drastic changes but I'm open to anything.
EDIT (Body redacted so code fit)