代码之家 › 专栏 › 技术社区 › user5405873

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

datatables jquery javascript

3

user5405873 · 技术社区 · 7 年前

我能够创造 dataTable 成功地

        <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();
            });
        });
    });

当我不添加分隔符来分割日期时,上面的代码可以完美地工作

当我添加除法器时,上面的代码不起作用。

请帮我提前谢谢!!!!

1 回复 | 直到 7 年前

1

2

Sarah C. Groß 7 年前

如果你查看浏览器开发工具的控制台(点击键盘上的F12打开),你会发现有一个JavaScript错误。这实际上是阻止数据表呈现的原因。

而您可以通过插入三个空的 <th> 单元格到标题行( colspan 在这里不起作用),从而获得要渲染的DataTable(请参见 https://jsfiddle.net/n34vbnmd/1 )-数据表在排序时应该如何处理这些行?

更好的解决方案是在每次渲染后动态插入这些行。您需要将具有公共标题行的行分组,例如,使用自定义数据属性。然后你可以使用 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>