Question

我的问题：

我的表格中有一个错位问题我无法解决，我需要将图像中的红色部分圈起来与固定列（3个第一列）对齐。

我正在使用html分析Firebug并使用html attributes玩我几乎修复了它，它位于标记DTFC_LeftWrapper中。我仍然会试图找到问题。

我正在使用JQuery Datatable与Scroller和FixedColumn插件：

Bootstrap v3.3.5，DataTables 1.10.9，Scroller 1.2.2，FixedColumns 3.1.0

Scroller/css/dataTables.scroller.min.css
bootstrap/dataTables.bootstrap.css
FixedColumns-3.1.0/css/fixedColumns.dataTables.css

Scroller/js/dataTables.scroller.min.js
bootstrap/dataTables.bootstrap.js
FixedColumns-3.1.0/js/dataTables.fixedColumns.js

结果：

这个javascript：

table.DataTable({ "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // datatable layout without  horizontal scroll
                stateSave: true,
                "bFilter": true,
                "bSort": sorting,
                "bInfo": false,
                "scrollY": scrollsize,
                "scrollX": "true",
                "scrollCollapse": true,
                "paging": false              
            });

new $.fn.dataTable.FixedColumns(table, { leftColumns: 3 });

HTML

<table class="table table-hover table-condensed" id="datatableList">
    <thead>
        <tr>
            @*<th>Picking Team</th>*@
            <th class="width-300">Master Account Name</th>
            <th>Cut-Off</th>
            <th>Status</th>
            @* CREATES THE COLUMNS *@
            @for (var line = 0; line < Model.MaxColumns; line++)
            {
                <th class="text-center">Time</th>
                <th>Batch</th>
                <th class="text-center">Orders</th>
                <th class="right-border-2">Actions</th>
            }
        </tr>
    </thead>
    <tbody>
        @* CREATES LINES FOR EACH MASTER ACCOUNT *@
        @foreach (var masterAccount in Model.AllMasterAccounts.OrderBy(x => x.TeamPickingId).ThenBy(y => y.MasterAccountName))
        {
            <tr masteraccountid="@masterAccount.Id">
                @*<td class="bg-grey-cararra">@(masterAccount.TeamPicking == null ? string.Empty : @masterAccount.TeamPicking.Name)</td>*@
                <td class="bg-grey-cararra">@masterAccount.MasterAccountName</td>
                <td class="bg-grey-cararra">@GeneralHelper.ConvertTo12HrsFormat(masterAccount.DailyOrderCutOffTime)</td>
                <td class="bg-grey-cararra"><a class="label label-sm bg-green">Completed</a></td>
                @{
            var batchPickingList = Model.AllBatchPickingSummaries.Where(x => x.MasterAccountId == masterAccount.Id).OrderBy(y => y.BatchDateTime);
            var missingColumns = Model.MaxColumns - batchPickingList.Count();
                }
                @foreach (var batchPicking in batchPickingList)
                {
                    var statusColour = string.Empty;//batchPicking.StatusColour();

                    <td class="@statusColour">@batchPicking.BatchDateTime.ToString(GeneralHelper.TimeFormat24H)</td>
                    <td class="@statusColour">@batchPicking.BatchNumber</td>
                    <td class="@statusColour text-center">@batchPicking.TotalOrders</td>
                    <td class="right-border-2"><a action="SetPrinted">Set Printed</a></td>
                }

                @* CREATES THE MISSING COLUMNS *@
                @for (var line = 0; line < missingColumns; line++)
                {
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="right-border-2"><a action="setNoOrders">No Orders</a></td>
                }
            </tr>
        }
    </tbody>
</table>

使用JQuery Datatable与Scroller，FixedColumns插件的错位

0 个答案: