javascript - 如果添加了带有标题的新行，为什么 dataTable 不起作用

Question

我能够成功创建dataTable

这是演示:https://jsfiddle.net/w2nevcca/3/

添加时出现问题

        <tr>
            <th class="widthind">14/11/2017</th>
        </tr>     
                 <!-- added as date divider -->

当我将上面的 code 添加为 divider 以显示我的 date

这是第二个 演示(不工作):https://jsfiddle.net/pkxmnh2a/12/

下面是我的代码

HTML:

<div class="table-content table-responsive">
    <table id="examples" class="display tvalues" cellspacing="0" width="100%" name="tabel">
        <thead>
            <tr>
                <!--th>ID</th-->
                <th>User Id</th>
                <th>User Name</th>
                <th>Project Name</th>
                <th>Work Description</th>
                <!--<th>Reported On</th>-->
            </tr>
        </thead>
        <tfoot>
            <tr>
                <!--th>ID</th-->
                <th>User Id</th>
                <th>User Name</th>
                <th>Project Name</th>
                <th>Work Description</th>
                <!-- <th>Reported On</th>-->
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th class="widthind">14/11/2017</th>
            </tr>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 2222</p>
                </td>
            </tr>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 33333</p>
                </td>
            </tr>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 44444</p>
                </td>
            </tr>
            <tr>
                <th class="widthind">13/11/2017</th>
            </tr>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>yesterday report</td>
                <td>
                    <p>this my yesterday day report employeee 2222</p>
                </td>
            </tr>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>yesterday report</td>
                <td>
                    <p>this my yesterday day report employeee 33333</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

下面是我的javascript代码

JS:

$(document).ready(function () {
        var table = $('#examples').DataTable();
        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();

            var column = table.column($(this).attr('data-column'));
            column.visible(!column.visible());
        });

        $('#examples tfoot th').each(function () {
            var title = $('#examples thead th').eq($(this).index()).text();
            $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
        });
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });
    });

当我不添加分隔符来显示日期时，上面的代码工作得很好

当我添加分隔符时，上面的代码不起作用。

请提前帮助我谢谢!!!!

Answer 1

如果您查看浏览器开发人员工具的控制台(通过按键盘上的 F12 打开)，您会发现存在 JavaScript 错误。这实际上是阻止数据表呈现的原因。

此错误的原因是 DataTables 没有准备好遇到这样的行 - 它希望所有行都以相同的格式(和相同数量的列)保存数据。

虽然您可以通过插入三个空的 <th> 来消除错误单元格添加到标题行(colspan 在这里不起作用)，从而使 DataTable 呈现(请参阅 https://jsfiddle.net/n34vbnmd/1)- DataTables 应该如何知道如何在排序时处理这些行？

更好的解决方案是在每次渲染后动态插入这些行。您需要对应该具有公共(public)标题行的行进行分组，例如使用自定义数据属性。然后你可以使用 fnDrawCallback通过 DataTable 的选项进行回调，以便在重绘 DataTable 时生成这些标题行。

您可能还想查看有关“行分组”的官方文档: https://datatables.net/examples/advanced_init/row_grouping.html - 我刚发现这个，但它基本上和我的例子一样。请注意，我没有用多个页面等彻底测试我的示例，文档中提供的代码似乎可以更好地处理这个问题!

$(document).ready(function () {
    var table = $('#examples').DataTable({
        "fnDrawCallback": function() {
          var currentGroup = null;
          $(this).find('tbody tr').each(function() {
            var thisRow = $(this),
                rowGroup = thisRow.attr('data-group');
            if (rowGroup != currentGroup) {
                currentGroup = rowGroup;
                thisRow.before('<tr class="widthind"><th colspan="4">' + rowGroup + '</th></tr>');
            }
          });
        }
    });
    
    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();

        var column = table.column($(this).attr('data-column'));
        column.visible(!column.visible());
    });

    $('#examples tfoot th').each(function () {
        var title = $('#examples thead th').eq($(this).index()).text();
        $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
    });
    
    table.columns().eq(0).each(function (colIdx) {
        $('input', table.column(colIdx).footer()).on('keyup change', function () {
            table
                .column(colIdx)
                .search(this.value)
                .draw();
        });
    });
});

.widthind th {
  background-color: black;
  color: white;
  text-align: left;
}

<link href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<div class="table-content table-responsive">
    <table id="examples" class="display tvalues" cellspacing="0" width="100%" name="tabel">
        <thead>
            <tr>
                <!--th>ID</th-->
                <th>User Id</th>
                <th>User Name</th>
                <th>Project Name</th>
                <th>Work Description</th>
                <!--<th>Reported On</th>-->
            </tr>
        </thead>
        <tfoot>
            <tr>
                <!--th>ID</th-->
                <th>User Id</th>
                <th>User Name</th>
                <th>Project Name</th>
                <th>Work Description</th>
                <!-- <th>Reported On</th>-->
            </tr>
        </tfoot>
        <tbody>
            <tr data-group="14/11/2017">
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 2222</p>
                </td>
            </tr>
            <tr data-group="14/11/2017">
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 33333</p>
                </td>
            </tr>
            <tr data-group="14/11/2017">
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 44444</p>
                </td>
            </tr>

            <tr data-group="13/11/2017">
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>yesterday report</td>
                <td>
                    <p>this my yesterday day report employeee 2222</p>
                </td>
            </tr>
            <tr data-group="13/11/2017">
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>yesterday report</td>
                <td>
                    <p>this my yesterday day report employeee 33333</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>