DataTables is changing the width of columns with ajax sourced data in a Bootstrap 3.3.7 application

Question

My application is using:

• DataTables 1.10.16
• Bootstrap 3.3.7
• jQuery 3.2.1

Scenario:

I'm trying to add form inputs to the headings on a table to allow searching by 2 columns. This is a custom feature of my application; it is not the search facility that DataTables provides.

Problem:

I want the search inputs to appear full width of each column. I want it to look like this:

But it's being rendered like this - notice that the search inputs have reduced in width:

(The table data is blurred due to it being a private application).

The markup I've used is based on Bootstrap's column system - I've used 2 .col-md-6 so the <th> elements are equal width:

<table id="regulatoryInformationTable" class="table responsive display table-striped pb-25" cellspacing="0" width="100%">
    <thead>
        <th class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control" placeholder="Search Regulation Name">
            </div>
        </th>
        <th class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control" placeholder="Search Regulation Data">
            </div>
        </th>
    </thead>
</table>

If I open the page with this markup it renders as per the first screenshot - but without any data in the table - as I haven't made the ajax request and updated the DataTable at this point.

When I make the ajax request, the table is populated, but then the inputs seem to shrink in width. My js to use DataTables and make the ajax request is as follows:

$(function() {

    /* Populate table of Regulatory Information */
    var regulatoryInformationTable = $('#regulatoryInformationTable').DataTable({
        "processing": true,
        "serverSide": true,
        "searching": false,
        "ajax": {
            "url": "/get-data.json",
            "method": "POST",
            "cache": false,
            "dataSrc": function (json) {
                return json.data;
            }
        },
        "columns": [
            {"data": "display_label", "name": "display_label"},
            {"data": "display_value", "name": "display_value"},
        ],
        "columnDefs": [
            {"width": "50%", "targets": 0},
            {"width": "50%", "targets": 1},
            {"orderable": false, "targets": [0,1]} // Can't order
        ],
        "paging": false, // no pagination
        "language": {
            "zeroRecords": "Sorry we no data for this substance",
            "infoFiltered": "",
            "infoEmpty": "",
            "processing": '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
        }
    });   
}); 

I had used the columnDefs array to specify width: 50% but this doesn't make any difference - even if I remove it.

Can anyone advise how to fix this?

Answer 1

Check out following code snippet where datatable is working as expected:

$(function() {
    /* Populate table of Regulatory Information */
    var regulatoryInformationTable = $('#regulatoryInformationTable').DataTable({
        "processing": true,
        "serverSide": true,
        "searching": false,
        "ajax": {
        		"url": "https://jsonplaceholder.typicode.com/albums",
            "method": "GET",
            "cache": false,
            "dataSrc": function (json) {
                return json;
            }
        },
        "columns": [
            {"data": "id", "name": "id"},
            {"data": "title", "name": "title"},
        ],
        "columnDefs": [
            {"width": "50%", "targets": 0},
            {"width": "50%", "targets": 1},
            {"orderable": false, "targets": [0,1]} // Can't order
        ],
        "paging": false, // no pagination
        "language": {
            "zeroRecords": "Sorry we no data for this substance",
            "infoFiltered": "",
            "infoEmpty": "",
            "processing": '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
        }
    });   
}); 

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<table id="regulatoryInformationTable" class="table responsive display table-striped pb-25" cellspacing="0" width="100%">
    <thead>
        <th class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control" placeholder="Search Regulation Name">
            </div>
        </th>
        <th class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control" placeholder="Search Regulation Data">
            </div>
        </th>
    </thead>
</table>

Check this jsfiddle if you prefer.

Explaination:

I have used your original code and modified few bits so that I can post a working demo here. Only things I have changed are api to get data and required CSS and javascript files. I'm using api from jsonplaceholder for demonstration and have modified columns based on api response structure.

Answer 2

me too facing the same issue couple of week before if you dont want to auto width add,

table {
table-layout: fixed;
width: 100%; 

}

so this flicker wont appear.because its basic table feature to adjust the td size from content.

Answer 3

Seems that DataTables sets the width of the th to a fixed value. This should cut the inputs inside. Try to disable the autoWidth option. Leave others options as You defined.

$('#regulatoryInformationTable').dataTable( {
  "autoWidth": false,
} );

Ref: https://datatables.net/reference/option/autoWidth

Do not use the col-* Bootstrap class on tables, let tables flow free, these classes are intended for layouts.