Javascript jQuery Datatable标题和正文宽度与收拢的边栏不匹配
我有一个数据表和一个可折叠的边栏。该表具有Javascript jQuery Datatable标题和正文宽度与收拢的边栏不匹配,javascript,jquery,css,datatables,Javascript,Jquery,Css,Datatables,我有一个数据表和一个可折叠的边栏。该表具有表布局：修复了，我在css中定义了所有列宽。当sidbar折叠时，表看起来很完美，但是如果侧栏打开，则列和标题未对齐。当我打开firebug时，我看到dataTables\u scrollHeadInner具有宽度：1558px但dataTables\u滚动体具有宽度：1343px。我不知道为什么标题没有随着主体一起调整大小。所有代码如下（HTML是动态生成的，太大，无法粘贴到此处）： Javascript: $(document).ready(fun
表布局：修复了，我在css中定义了所有列宽。当sidbar折叠时，表看起来很完美，但是如果侧栏打开，则列和标题未对齐。当我打开firebug时，我看到dataTables\u scrollHeadInner
具有宽度：1558px但dataTables\u滚动体
具有宽度：1343px
。我不知道为什么标题没有随着主体一起调整大小。所有代码如下（HTML是动态生成的，太大，无法粘贴到此处）：
Javascript:
$(document).ready(function () {
var selector = "#artist_datatable";
var defaults = {
"language": {
"processing": "Processing...",
"lengthMenu": "Show _MENU_ entries",
"zeroRecords": "No matching records found",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"infoPostFix": "",
"search": "Search",
"url": "",
"paginate": {
"first": "First",
"previous": "Previous",
"next": "Next",
"last": "Last"
}
}
};
var features = {
"autoWidth": false,
"deferRender": false,
"info": true,
"jQueryUI": false,
"lengthChange": true,
"ordering": true,
"paging": true,
"processing": true,
"scrollX": false,
"scrollY": false,
"searching": true,
"stateSave": false,
"delay": 0,
};
var options = {
"displayStart": 0,
"lengthMenu": [10, 25, 50, 100],
"orderClasses": true,
"order": [[0,"asc"]],
"orderMulti": true,
"pageLength": 50,
"pagingType": "full_numbers",
"scrollCollapse": false,
"searchDelay": 0,
"stateDuration": 7200,
"stripeClasses": [""],
"responsive": true,};
var ajax = {
"serverSide": false,
"data": [{ /*data for the table*/
};
setTimeout(function() {
var columns = {
"columns": [
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": false,
"searchable": false,
"title": "<input type='checkbox' name='multiselect_checkall' class='multiselect_checkall' />",
"visible": true,
"className": "row-select",
"width": "",
"data": null,
"render": function(data, type, row, meta) {
var checkbox = "<input type='checkbox' name='multiselect_checkbox' value='" + first + "' class='multiselect_checkbox' />";
var output = "";
var startHtml = "";
var endHtml = "";
var attributes = "";
attributes += 'name="multiselect_checkbox check" ';
attributes += 'class="multiselect_checkbox" ';
var first;
if (row.hasOwnProperty('id') && typeof('id') !== 'function') {
first = row['id'];
}
if ("" != attributes) {
var custom = "";
custom += startHtml;
custom += "<input type='checkbox' value='";
custom += first;
custom += "'";
custom += attributes;
custom += "/>"
custom += endHtml;
return custom;
}
output += startHtml;
output += checkbox;
output += endHtml;
return output;
},
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Name",
"visible": true,
"className": "row-name",
"width": "",
"data": "name",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Sex",
"visible": true,
"className": "row-sex",
"width": "",
"data": "sex",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Prio",
"visible": true,
"className": "row-priority",
"width": "",
"data": "priority",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Role",
"visible": true,
"className": "",
"width": "",
"data": "role",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "(D)",
"visible": true,
"className": "row-date",
"width": "",
"data": "bday",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "(M)",
"visible": true,
"className": "row-month",
"width": "",
"data": "bmonth",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "(Y)",
"visible": true,
"className": "row-year",
"width": "",
"data": "byear",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Works",
"visible": true,
"className": "",
"width": "",
"data": "works",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": false,
"searchable": false,
"title": "Actions",
"visible": true,
"className": "row-buttons",
"width": "",
"data": "",
"render": function(data, type, row, meta) {
var actionsString = "";
var routeParameters, attributes, visibleFlag, roleFlag;
routeParameters = new Array();
attributes = "";
visibleFlag = true;
roleFlag = true;
roleFlag = false;
roleFlag = true;
if (true == visibleFlag && true == roleFlag) {
routeParameters["id"] = row.id;
var route = Routing.generate("artist_show", routeParameters);
attributes += 'rel="tooltip" ';
attributes += 'title="Show" ';
attributes += 'class="btn btn-info btn-sm btn-icon icon-left" ';
attributes += 'role="button" ';
var url = "<a ";
url += 'href="' + route + '" ';
url += attributes;
url += ">";
url += '<i class="entypo-info"></i> Show';
url += "</a>";
actionsString += url;
}
routeParameters = new Array();
attributes = "";
visibleFlag = true;
roleFlag = true;
roleFlag = false;
roleFlag = true;
if (true == visibleFlag && true == roleFlag) {
routeParameters["id"] = row.id;
var route = Routing.generate("artist_edit", routeParameters);
attributes += 'rel="tooltip" ';
attributes += 'title="Edit" ';
attributes += 'class="btn btn-default btn-sm btn-icon icon-left" ';
attributes += 'role="button" ';
var url = "<a ";
url += 'href="' + route + '" ';
url += attributes;
url += 'onclick="' + "return confirm('Are you sure?')" + '" ';
url += ">";
url += '<i class="entypo-pencil"></i> Edit';
url += "</a>";
actionsString += url;
}
return actionsString;
},
},
]
};
$.extend(defaults, features);
$.extend(defaults, options);
$.extend(defaults, ajax);
$.extend(defaults, columns);
if ( $.fn.dataTable.isDataTable( selector ) ) {
} else {
var oTable = $(selector).DataTable(defaults);
}
var dt_wrapper = $("#artist_datatable" + "_wrapper");
dt_wrapper.find(".dataTables_scrollFootInner").append("\x0A");
dt_wrapper.find(".multiselect_checkall").click(function(event) {
var that = this;
dt_wrapper.find("input.multiselect_checkbox:checkbox").each(function() {
this.checked = that.checked;
});
});
dt_wrapper.find(".multiselect_action_click").on('click', function(event) {
var length = dt_wrapper.find("input.multiselect_checkbox:checkbox:checked").length;
event.preventDefault();
if (length > 0) {
if (!confirm( "Are you sure?" )) {
return;
}
$.ajax({
url: $(this).attr("href"),
type: "POST",
cache: false,
data: {
'data': $("input:checkbox:checked.multiselect_checkbox", oTable.rows().nodes()).serializeArray()
},
success: function(msg) {
oTable.draw();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest + ' ' + textStatus + ' ' +errorThrown);
}
})
} else {
alert("You need to select at least one element.");
}
});
}, features.delay);
});
仅供参考：这是一个symfony
应用程序，我正在使用SgDatatablebundle（）生成datatable。提前谢谢。Screenshort附带了一个打开的侧边栏，以便您能够理解我的问题。查看复选框（如果您像我一样几乎失明，并且很难找到未对准！：p）
我用这个
$('.sidebar-toggle').click(function(){
$('.dataTables_scrollHeadInner').css('width','100%');
$('.table').css('width','100%');
setTimeout(function(){
datatable.columns.adjust().draw()}
,300);
});
根据边栏关闭和打开所用的时间设置超时是否尝试在DataTables features对象中设置“autoWidth”：true
？设置auto_width:true
仅在我点击F12打开firebug后调整宽度大小。
$('.sidebar-toggle').click(function(){
$('.dataTables_scrollHeadInner').css('width','100%');
$('.table').css('width','100%');
setTimeout(function(){
datatable.columns.adjust().draw()}
,300);
});