Unable to specify column width during initialization
Unable to specify column width during initialization
alelau
Posts: 12Questions: 2Answers: 0
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>
This discussion has been closed.
Replies
Create a jFiddle here:
https://jsfiddle.net/t4mw8syq/
I think the column width is being affected by the footer search inputs. Try removing as a test. I'm not sure how to fix it though.
This should work. Do you see an error in your browser's console? Maybe you missed adding a
,when adding scrollX.Kevin
Hi Kevin,
Thanks a lot! It makes sense. I will try to debug that. Will post and update if I am successful.
Thanks,
Alex
Kevin was right that making the footer as search box broke the columns command. I get what I want by re-implementing the column search function as follows. But now I have double sorting arrows on the column header ... sigh ... (will need to dig deeper on this wounder library)
However, I am still interested to know the native DataTable way to achieve my goal.
Anyone?
You are probably loading both the DataTables base stylesheet and one of the integration stylesheets (e.g. dataTables.bootstrap.css). Load only one. The download builder would sort that out for you.
Its not so much that the footer broke the column command - DataTables will have tried to apply it, But when it did, it found that the content you've put into the column wouldn't fit into it.
The way I address that normally is to use:
https://jsfiddle.net/t4mw8syq/1/
Now the width is being constrained by the text content in the header. The browser is seeing that things don't add up and attempts to correct for it.
Allan
Hi Allan,
Thanks a lot for the replay. My app is working perfectly now.
Thanks,
Alex