使用jquery数据表，我可以't在不破坏FixedHead的情况下生成单元格colspan=3

Using jquery datatables I can't make a cell colspan=3 without breaking FixedHead

本文关键字：情况下 FixedHead colspan 单元格 我可以 数据表 jquery 使用      更新时间：2023-09-26

我有一个固定的head数据表，当向下滚动时，前4行固定在顶部，问题是当我试图使第二行colspan=3成为写着"make me colspan=3"的行时，数据表失去了固定在顶部的能力。我不知道为什么这会影响数据表。谢谢你的帮助。代码：http://jsfiddle.net/xF8hZ/139/

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
    <tr>
        <th colspan=3></th>
        <th colspan=3>234</th>
    </tr>
    <tr>
        <th>Make me </th>
        <th>colspan</th>
        <th>=3</th>
        <th>
            <p class="rotatehead">Hazmat</p>
        </th>
        <th>
            <p class="rotatehead">Out of Area</p>
        </th>
        <th>
            <p class="rotatehead">Lite</p>
        </th>
    </tr>

更新：我刚刚在添加colspan=3后看到了我的控制台，我得到了这个错误：

Uncaught TypeError: Cannot read property 'style' of undefinedjquery.dataTables.js:4138 _fnCalculateColumnWidthsjquery.dataTables.js:3265 _fnInitialisejquery.dataTables.js:6521 (anonymous function)jquery-1.8.3.js:611 jQuery.extend.eachjquery-1.8.3.js:241 jQuery.fn.jQuery.eachjquery.dataTables.js:6047 DataTablejquery.dataTables.js:14691 $.fn.DataTablepriceadjustment.html:30 (anonymous function)jquery-1.8.3.js:974 jQuery.Callbacks.firejquery-1.8.3.js:1084 jQuery.Callbacks.self.fireWithjquery-1.8.3.js:406 jQuery.extend.readyjquery-1.8.3.js:83 DOMContentLoaded

从DataTables复杂标题文档：

请注意，每列必须至少有一个唯一的单元格（即没有colspan的单元格），这样DataTables就可以使用该单元格来检测列并使用它来应用排序。

在您的示例中，尝试应用colspan的标头column不包含"唯一单元格"。

然而，您可以通过添加一个没有colspan的头行，然后将其css设置为display:none;:来解决这个问题

小提琴

标题示例：

 <thead>
        <tr>
            <th colspan=3></th>
            <th colspan=3>234</th>
        </tr>
        <!-- ADDED: Placeholder row for sorting -->
        <tr class="place">
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <!-- END Placeholder row for sorting -->
        <tr>
            <th colspan="3">Make me colspan = 3</th>
            <th>
                <p class="rotatehead">Hazmat</p>
            </th>
            <th>
                <p class="rotatehead">Out of Area</p>
            </th>
            <th>
                <p class="rotatehead">Lite</p>
            </th>
        </tr>
        <tr>
            <th colspan=3>RACK</th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>234</div>
            </th>
        </tr>
        <tr>
            <th colspan=3>TOTAL</th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>345</div>
            </th>
        </tr>
    </thead>

添加了CSS:

.place{
    display: none;
}
相关文章：