Мое приложение использует:
- DataTables 1.10.16
- Bootstrap 3.3.7
- jQuery 3.2.1
Сценарий:
Я пытаюсь добавить входные данные формы в заголовки таблицы, чтобы разрешить поиск по 2 столбцам.Это особенность моего приложения; не средство поиска, которое предоставляет DataTables.
Проблема:
Я хочу, чтобы входные данные поиска отображались на всю ширину каждого столбца.Я хочу, чтобы это выглядело так:
Но оно отображается так: обратите внимание, что входные данные поиска уменьшились в ширине:
(данные таблицы размыты из-за того, что это частное приложение).
Разметка, которую я использовалоснован на системе столбцов Bootstrap - я использовал 2 .col-md-6, поэтому элементы <th> имеют одинаковую ширину:
<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>
Если я открою страницу с этой разметкой, она будет отображаться согласно первому скриншоту -но без каких-либо данных в таблице - так как я не сделал запрос ajax и не обновил DataTable на этом этапе.
Когда я делаю запрос ajax, таблица заполняется, но затем кажется, что входные данные сокращаютсяв ширину.Мой js для использования DataTables и выполнения запроса ajax выглядит следующим образом:
$(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>'
}
});
});
Я использовал массив columnDefs для указания width: 50%, но это не имеет никакого значения - даже если я его удалю.
Кто-нибудь может посоветовать, как это исправить?