why dataTable is not acting if a new row with header is added

Admin 1
Viewed 551

I am able to create dataTable successfully

Here is Demo:https://jsfiddle.net/w2nevcca/3/

The problem occurs when i add

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

When i add above code as divider to show my date

Here is 2nd Demo(Not Working):https://jsfiddle.net/pkxmnh2a/12/

below is my code

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>

below is my javascript code

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

The above code works perfectly when i don't add divider to dive the date

when i add the divider the above code doesn't work.

Please help me thanks in advance !!!!

datatables jquery javascript
1 Answers

If you look into the console of your browser's developer tools (open up by hitting F12 on your keyboard), you can see that there's a JavaScript error. This is in fact what's preventing DataTables from rendering.

The reason for this error is that DataTables isn't prepared to encounter such a row - it expects all rows to hold data in the same format (and the same amount of columns).

While you can get rid of the error by inserting three empty <th> cells to the header row (colspan won't work here) and thus get DataTable to render (see https://jsfiddle.net/n34vbnmd/1) - how is DataTables supposed to know how to handle those rows when sorting?

A better solution would be to insert those rows dynamically after each rendering. You'll need to group the rows that should have a common header line, for example with a custom data-attribute. Then you can use the fnDrawCallback callback via DataTable's options in order to generate those header rows whenever the DataTable has been redrawn.

You might also want to look into the official docs for "row grouping": https://datatables.net/examples/advanced_init/row_grouping.html - I just found this, but it's essentially doing the same as my example. Mind that I haven't tested my example thoroughly with multiple pages etc., where the code provided in the docs seems to handle this better!

$(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>

user_9958000
Related