如何修复thead和tbody之间的jquery数据表中的对齐方式

问题描述

我在ASP.NET MVC5中使用CRUD操作创建表，并且该表使用带有的Jquery数据表，但是当在浏览器中查看时，当我单击固定的thead时，thead和表主体之间的对齐出现问题。当我将布局从null更改为布局页面时，它也已修复。 [ 这是我的代码

$('.table tfoot th').each(function () {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder=' + title + '/>');
});//function each
function activatejQueryTable() {
    $(".table").DataTable({
        dom: "Bfrtip",buttons: [
            {
                extend: 'colvis',text: "Columns Visible"
            },{
                extend: 'collection',text: 'Export',buttons: [
                    'copy','excel','csv','pdf','print'
                ]
            }
        ],// buttons array
        columnDefs: [{
            targets: 0,visible: true
        }
        ],// columnDefs array
        "pageLength": 10,"fixedColumns": true,"scrollY": "300px","scrollX": true,"scrollCollapse": true,"paging": true,"searching": true,"language": {
            "decimal": ",","thousands": ".",//"url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/arabic.json",},//language
           initComplete: function () {
            // Apply the search
            this.api().columns().every(function () {
                var that = this;
                var searchTextBoxes = $(this.footer()).find('input');


                searchTextBoxes.on('keyup change clear',function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });//searchTextBoxes function
                searchTextBoxes.on('click',function (e) {
                    e.stopPropagation();
                }); //searchTextBoxes event
            });//this.api function
        }//initComplete function
    });//DataTable function
}//activatejQueryTable function

@model IEnumerable<TFD_ADMIN_9.Models.Professions>


@{
    ViewBag.Title = "ViewAll";
    Layout = null;
}

<table class="table table-bordered table-hover">
    <thead>
        <tr class="text-center text-Nowrap">
            <th></th>
            <th>
                @Html.displayNameFor(model => model.PF_ID_AL)
            </th>
            <th>
                @Html.displayNameFor(model => model.ProfessionAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.DepartmentAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.CrewAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.Direct_Indirect)
            </th>
            <th>
                @Html.displayNameFor(model => model.ProfessionEn)
            </th>
            <th>
                @Html.displayNameFor(model => model.PositionFrançais)
            </th>
            <th>
                @Html.displayNameFor(model => model.DepartmentEn)
            </th>
            <th>
                @Html.displayNameFor(model => model.Division)
            </th>
            <th>
                @Html.displayNameFor(model => model.DivisionAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.Sub_Department)
            </th>
            <th>
                @Html.displayNameFor(model => model.FixedSalary)
            </th>
            <th>
                @Html.displayNameFor(model => model.Type)
            </th>
            <th>
                @Html.displayNameFor(model => model.Direct_Indirect_OLD)
            </th>

        </tr>
    </thead>

        @foreach (var item in Model)
        {
        <tr class="text-center text-Nowrap border-dark text-dark">
            <td class="text-Nowrap">
                <a class="btn btn-primary btn-sm" onclick="Edit('@Url.Action("AddOrEdit","Profession",new { id=@item.PF_ID_AL})')"><i class="fa fa-pencil fa-lg"></i></a>
                <a class="btn btn-danger btn-sm" onclick="Delete('@Url.Action("Delete",new { id=@item.PF_ID_AL})')"><i class="fa fa-trash fa-lg"></i></a>
            </td>
            <td>
                @Html.displayFor(modelItem => item.PF_ID_AL)
            </td>
            <td>
                @Html.displayFor(modelItem => item.ProfessionAr)
            </td>
            <td>
                @Html.displayFor(modelItem => item.DepartmentAr)
            </td>
            <td>
                @Html.displayFor(modelItem => item.CrewAr)
            </td>
            <td>
                @Html.displayFor(modelItem => item.Direct_Indirect)
            </td>
            <td>
                @Html.displayFor(modelItem => item.ProfessionEn)
            </td>
            <td>
                @Html.displayFor(modelItem => item.PositionFrançais)
            </td>
            <td>
                @Html.displayFor(modelItem => item.DepartmentEn)
            </td>
            <td>
                @Html.displayFor(modelItem => item.Division)
            </td>
            <td>
                @Html.displayFor(modelItem => item.DivisionAr)
            </td>
            <td>
                @Html.displayFor(modelItem => item.Sub_Department)
            </td>
            <td>
                @Html.displayFor(modelItem => item.FixedSalary)
            </td>
            <td>
                @Html.displayFor(modelItem => item.Type)
            </td>
            <td>
                @Html.displayFor(modelItem => item.Direct_Indirect_OLD)
            </td>
        </tr>
        }

    <tfoot>
        <tr class="text-center text-Nowrap">
            <th></th>
            <th>
                @Html.displayNameFor(model => model.PF_ID_AL)
            </th>
            <th>
                @Html.displayNameFor(model => model.ProfessionAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.DepartmentAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.CrewAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.Direct_Indirect)
            </th>
            <th>
                @Html.displayNameFor(model => model.ProfessionEn)
            </th>
            <th>
                @Html.displayNameFor(model => model.PositionFrançais)
            </th>
            <th>
                @Html.displayNameFor(model => model.DepartmentEn)
            </th>
            <th>
                @Html.displayNameFor(model => model.Division)
            </th>
            <th>
                @Html.displayNameFor(model => model.DivisionAr)
            </th>
            <th>
                @Html.displayNameFor(model => model.Sub_Department)
            </th>
            <th>
                @Html.displayNameFor(model => model.FixedSalary)
            </th>
            <th>
                @Html.displayNameFor(model => model.Type)
            </th>
            <th>
                @Html.displayNameFor(model => model.Direct_Indirect_OLD)
            </th>

        </tr>
    </tfoot>
</table>

] 1

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）