First time DataTable user here. I have a page which needs DataTable and ChartJS. The columns command during initialization did not have any effect.
Also if I add scrollX, the column search function will break (the search box did not display).
Any help/hint will be very much appreciated.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Analytic Main Page</title>
<!-- JQuery, DataTable-->
<script src="Scripts/jquery-1.12.4.js"></script>
<script src="Scripts/datatables.min.js"></script>
<script src="Scripts/Chart.min.js"></script>
<script src="Scripts/dataTables.buttons.min.js"></script>
<script src="Scripts/buttons.html5.min.js"></script>
<!-- Style Sheet -->
<!--link href="CSS/font-awesome.min.css" rel="stylesheet"-->
<link href="CSS/datatables.min.css" rel="stylesheet">
<link href="CSS/buttons.dataTables.min.css" rel="stylesheet">
<link href="CSS/jquery.dataTables.min.css" rel="stylesheet">
<script>
$(document).ready(function() {
$('#flatbom').dataTable({
"bFilter": true,
"dom": 'Brtip',
"buttons": ['pageLength', 'csvHtml5'],
"lengthMenu": [
[ 15, 25, 50, -1 ],
[ '15 rows', '25 rows', '50 rows', 'Show all' ]
],
"columns": [
{"width": "5%" },
null,
null,
null,
null,
null
]
});
$('#flatbom tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#flatbom').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
var config = {
type: 'pie',
data: {
datasets: [{data: [1, 6, 1, 10, 3, 1, 1, 3, 1, 33, 1],
backgroundColor:["#F15294", "#609DA8", "#60B6A8", "#F17CF0", "#DECF21", "#5DE5AA", "#FAAA7A", "#DE9F7F", "#DE9F7F", "#2D4D6E", "#FAA47A"],
label: "Part Category"
}],
labels:["Bracket", "Fitting", "Base Plate", "Normal", "Fastener", "Washer", "Handle", "Chemical", "Manifold", "Ballard Item Class", "Seal"]},
options: {responsive: false}
};
var ctxa = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctxa, config);
} );
</script>
<style>
.main-header {
width: 100%;
background: #7bc;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5PX;
}
</style>
</head>
<body>
<img style="padding-left: 5px;" src="images/logo.png" alt="ACME Power Systems">
<div class="main-header">
<h2 >Analytic Information on 5120430 Rev: 01</h2>
</div>
<h2>Consolidated BOM - All levels</h2><h4>(Deepest Level: 5)</h4>
<table id="flatbom" cellspacing="0" width="100%" >
<thead>
<tr><th>Item Number</th><th>Reference Count</th><th>Part Category</th><th>Description</th><th>uom</th><th>Quantity</th></tr>
</thead>
<tfoot>
<tr><th>Item Number</th><th>Reference Count</th><th>Part Category</th><th>Description</th><th>uom</th><th>Quantity</th></tr>
</tfoot>
<tbody>
<tr><td>012887</td><td>1</td><td>Washer</td><td>Washer, flat, M6, metric, 304SS</td><td>EA</td><td>18.0</td></tr>
<tr><td>012888</td><td>1</td><td>Nut</td><td>Nut, flat, M6, metric, 304SS</td><td>EA</td><td>18.0</td></tr>
</tbody>
</table>
<h4 class="pie">Pie Chart does not show Documents</h4>
<h4 class="pie">and Tools</h4>
<canvas id="chart-area" width="450" height="450"></canvas>
<script type="text/javascript">
$('#flatbom')
.addClass('table table-bordered table-hover');
</script>
</body>
</html>