Question

我有一个数据表和一个可折叠的侧边栏。该表有table-layout:fixed，我在我的css中定义了所有列的宽度。当sidbar折叠时，该表看起来很完美，但如果侧边栏打开，则列和标题未对齐。当我打开萤火虫时，我发现dataTables_scrollHeadInner有width: 1558px;但dataTables_scrollBody有width: 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);
});

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;}

仅供参考：这是一个symfony应用，我使用SgDatatablebundle（https://github.com/stwe/DatatablesBundle）来生成数据表。提前致谢。在侧边栏打开时附加了Screenshort，以便您可以理解我的问题。看看复选框（如果你几乎和我一样失明，并且找不到错位！：p）

enter image description here

Answer 1

我用这个固定了它

$('.sidebar-toggle').click(function(){
    $('.dataTables_scrollHeadInner').css('width','100%');
    $('.table').css('width','100%');
    setTimeout(function(){
        datatable.columns.adjust().draw()}
    ,300);
});

根据侧边栏关闭和打开所花费的时间设置超时

jQuery Datatable标题和正文宽度不匹配的折叠侧边栏

1 个答案: