为什么dataTable在添加带标题的新行时不起作用

Question

我能够成功创建dataTable

以下是演示：https://jsfiddle.net/w2nevcca/3/

添加

时会出现问题

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

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

时

这是第2次 演示（不工作）：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();
            });
        });
    });

当我没有添加divider来潜水日期

时，上面的代码非常有效

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

请提前帮助我!!!!

Answer 1

如果您查看浏览器开发人员工具的控制台（通过按键盘上的F12打开），您会发现存在JavaScript错误。这实际上是阻止DataTables渲染的原因。

此错误的原因是DataTables不准备遇到这样的行 - 它希望所有行以相同的格式（以及相同数量的列）保存数据。

虽然您可以通过向标题行插入三个空<th>单元格来解决错误（colspan在此处不起作用），从而获取DataTable进行渲染（请参阅https://jsfiddle.net/n34vbnmd/1 ） - DataTables如何在排序时知道如何处理这些行？

更好的解决方案是在每次渲染后动态插入这些行。您需要对应具有公共标题行的行进行分组，例如使用自定义数据属性。然后，您可以通过DataTable的选项使用fnDrawCallback回调，以便在重新绘制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>