javascript - jQuery Datatable header and body width mismatch withcollapsed sidebar -
i have datatable , collapsible sidebar. table has table-layout:fixed , defined of columns width in css. table looks perfect when sidbar collapsed, if sidebar opened, column , header misaligned. when open firebug, see datatables_scrollheadinner has width: 1558px; datatables_scrollbody has width: 1343px. have no idea why header isn't getting resized along body. codes below (the html being generated dynamically , big paste here):
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_ _end_ of _total_ entries", "infoempty": "showing 0 0 of 0 entries", "sinfofiltered": "(filtered _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 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 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 = 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 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 select @ least 1 element."); } }); }, features.delay); }); css:
table.datatable{table-layout: fixed !important} .row-name[style]{width: 18% !important} .row-select{width: 5% !important;} .row-sex[style],.row-priority[style],.row-date[style],.row-month[style] {width: 5% !important;} .row-year[style]{width: 6% !important;} .row-buttons{width: 13%} .row-owner, .row-spe{width:5% !important;} .row-status{width: 5.5%;} .row-sequence[style],.row-cat[style]{width:4% !important;} .row-uid[style]{width: 12% !important;} fyi: symfony app , using sgdatatablebundle (https://github.com/stwe/datatablesbundle ) generate datatable. in advance. screenshort attached sidebar open can understand problem. @ checkboxes (if blind me , have trouble finding misalignment! :p )
Comments
Post a Comment