Unable to specify column width during initialization

Unable to specify column width during initialization

alelaualelau 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>


  • alelaualelau Posts: 12Questions: 2Answers: 0

    Create a jFiddle here:


  • kthorngrenkthorngren Posts: 11,868Questions: 25Answers: 2,775

    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.

    add scrollX, the column search function will break (the search box did not display).

    This should work. Do you see an error in your browser's console? Maybe you missed adding a , when adding scrollX.


  • alelaualelau Posts: 12Questions: 2Answers: 0

    Hi Kevin,

    Thanks a lot! It makes sense. I will try to debug that. Will post and update if I am successful.



  • alelaualelau Posts: 12Questions: 2Answers: 0

    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.


     <select id="searchoptions">
      <option value="0">Item Number</option>
      <option value="1">Reference Count</option>
      <option value="2">Part Category</option>
      <option value="3">Description</option>
      <option value="4">UOM </option>
      <option value="5">Qty.</option>
    <input id="search" type="Text" placeholder="Search">
            $('#search').on( 'keyup', function () {
                    .search( this.value )
            } );
  • allanallan Posts: 53,358Questions: 1Answers: 8,249 Site admin

    But now I have double sorting arrows on the column header ... sigh ...

    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:

    tfoot input {
      width: 100%


    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.


  • alelaualelau Posts: 12Questions: 2Answers: 0

    Hi Allan,

    Thanks a lot for the replay. My app is working perfectly now.



This discussion has been closed.