呈现页面时，jQuery DataTable 无法正确调整大小

Posted 2023-05-07

【中文标题】呈现页面时，jQuery DataTable 无法正确调整大小

【英文标题】：jQuery DataTable does not resize correctly when page is rendered

【发布时间】：2012-12-03 02:06:18

【问题描述】：

我一直在与这个问题作斗争一段时间。我的 jQuery DataTable 的宽度只有在我调整屏幕大小后才能正确显示。观看此截屏视频，了解会发生什么：

http://screencast.com/t/QY2ZgZp4By

这是场景：

我使用 ASP.NET 从 CSV 文件导入数据并动态构建表。该文件具有可变数量的列 - 因此它可以是任意数量的列。

生成表格后，我调用 DataTable 脚本来格式化表格，如下所示：

        Private Sub CreateInputDataTable()

        Dim input As BA.Input = CurrentInput
        Dim inputLines As BA.InputLines = input.Lines
        Dim columnHeaders As BA.InputColumnHeaders = input.ColumnHeaders
        'Dim loadDefItems As BA.InputLoadDefinitionItems = CurrentInputLoadDefinition.DefinitionItems

        phInputLoadData.Controls.Clear()

        Dim tblRows As Integer = inputLines.Count
        Dim tblCols As Integer = 19 ' Hard coded col number to create sample
        ' Create a Table and set its properties 
        Dim tbl As Table = New Table()
        ' Add the table to the placeholder control

        tbl.ID = "tblInputLoad"
        tbl.Attributes.Add("runat", "server")
        tbl.Width = Unit.Percentage(100)

        phInputLoadData.Controls.Add(tbl)

        'Add dropdown boxes to row headers
        Dim thr As TableHeaderRow = New TableHeaderRow()
        thr.TableSection = TableRowSection.TableHeader

        For i As Integer = 0 To tblCols - 1
            Dim cboColName As DropDownList = New DropDownList()

            Dim thc As TableHeaderCell = New TableHeaderCell()
            thc.Width = Unit.Pixel(80)

            thc.CssClass = "input-def-col-header"

            With cboColName
                .ID = "cboColName_" + i.ToString()
                .Width = Unit.Pixel(80)

                AddHandler cboColName.PreRender, AddressOf cboColName_PreRender

            End With

            'Add control to the table cell
            thc.Controls.Add(cboColName)

            'Add table cell to the TableRow
            thr.Cells.Add(thc)
        Next

        tbl.Rows.Add(thr)

        ' Add column headers
        thr = New TableHeaderRow()
        thr.TableSection = TableRowSection.TableHeader

        For i As Integer = 0 To tblCols - 1
            Dim thc As TableHeaderCell = New TableHeaderCell()
            thc.Width = Unit.Pixel(80)
            Dim txtBox As TextBox = New TextBox()

            txtBox.CssClass = "input-file-col-header"
            txtBox.Text = columnHeaders(i).ColumnHeaderName
            txtBox.Width = Unit.Pixel(80)
            ' Add the control to the TableCell
            thc.Controls.Add(txtBox)
            ' Add the TableCell to the TableRow
            thr.Cells.Add(thc)
        Next

        tbl.Rows.Add(thr)

        Dim tr As TableRow = New TableRow
        tr.TableSection = TableRowSection.TableBody

        ' Now iterate through input lines and add controls 
        For i As Integer = 0 To tblRows - 1
            tr = New TableRow()

            For j As Integer = 0 To tblCols - 1
                Dim tc As TableCell = New TableCell()
                tc.Width = Unit.Pixel(80)
                Dim txtBox As TextBox = New TextBox()
                txtBox.Width = Unit.Pixel(80)
                txtBox.Text = inputLines(i).Items(j).Value

                If inputLines(i).Items(j).ItemType <> BudgetAllocations.InputDefinitionColumnType.Data Then
                    txtBox.CssClass = "input-file-frozen-left-cols"
                End If

                ' Add the control to the TableCell
                tc.Controls.Add(txtBox)
                ' Add the TableCell to the TableRow
                tr.Cells.Add(tc)
            Next j

            ' Add the TableRow to the Table
            tbl.Rows.Add(tr)
        Next i

        ClientScript.RegisterClientScriptBlock(Me.GetType(), "FormatInputTable", _
              "$(document).ready(function() FormatInputTable(););", True)

    End Sub

表格被插入到 ASP.NET 占位符中，如下所示：

  <div id="div-input-load-cont" style="float: left; width: 70%; margin-top: 5px; height: 350px">
    <asp:PlaceHolder ID="phInputLoadData" runat="server" EnableViewState="False"></asp:PlaceHolder>
  </div>

这是格式化表格的脚本：

    function FormatInputTable() 
  var oTable = $('#ctl00_MainContent_tblInputLoad').dataTable(
    "bJQueryUI": false,
    "sScrollY": "300px",
    "sScrollX": "100%",
    "sScrollXInner": "50%",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bRetrieve": false,
    "bFilter": false,
    "bAutoWidth": false
  );
  new FixedColumns(oTable, 
    "iLeftColumns": 2,
    "iLeftWidth": 170,
    "bAutoWidth": false
  );
;

我的问题：当 html 页面被渲染时，由于表格的宽度，我的整个右侧容器浮动到左侧。在这个演示中，我将列数设置为 19。但是，当我最小化屏幕时，所有内容都会按照预期的方式正确显示。

我的问题：我该怎么做才能确保重新格式化的数据表正确显示，而不是向左浮动？任何帮助将不胜感激。

【问题讨论】：

这个问题有什么相关性吗？ ***.com/questions/8278981/…

【参考方案1】：

你应该从样式中清除float:left

【讨论】：

您能否详细说明一下具体应该如何/在哪里完成？

你想把你的桌子放在中间吗？？

格式化的数据表应该放在导航窗格旁边，而不是在它下面。如果您观看截屏视频，您会发现在我调整屏幕大小后一切正常。也许这里的问题是表是在回发之后动态创建的。

【参考方案2】：

在容器中添加 Overflow:hidden 解决了如下问题：

         <div id="div-input-load-cont" style="float: left; width: 100%; overflow: hidden; margin-top: 5px;
            height: 350px">
            <asp:PlaceHolder ID="phInputLoadData" runat="server" EnableViewState="False">
            </asp:PlaceHolder>
        </div>