datatable warning : cannot reinitialise data table please help

Question

User-1355965324 posted

When I am trying to make  the  first column  and last column freezing / fix  while scrolling , the following erro message is coming

datatable warning : cannot reinitialise data table

My code is given below

<table id="empview" class="display nowrap" cellspacing="0" style='font-size:80%'>
                                <thead class="thead-light">
                                    <tr>
                                        <th rowspan="2">Employee</th>
                                        <th colspan="4">Monday</th>
                                        <th colspan="4">Tuesday</th>
                                        <th colspan="4">Wednesday</th>
                                        <th colspan="4">Thursday</th>
                                        <th colspan="4">Friday</th>
                                        <th colspan="4">Saturday</th>
                                        <th colspan="4">Sunday</th>
                                        <th rowspan="2"> AVG Day off Hrs</th>
                                        <th rowspan="2"> NetHrs Per Week</th>
                                        <th rowspan="2"> Holiday Per Year</th>
                                        <th rowspan="2"> Sys.calc.Holiday Per Year </th>

<script>
    $(document).ready(function () {
        var table = $('#empview').DataTable();
        $('#empview tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }

            
        });
        var table1 = $('#empview').DataTable({
            scrollY: "300px",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            fixedColumns: {
                leftColumns: 1,
                rightColumns: 1
            }
        });
        

    });

</script>

Please help to fix the error and to freeze the first and last column while scrolling

Answer 1

User839733648 posted

Hi polachan,

According to your description and code, it seems that you are initializing datatables twice.

I suggest you may try to modify your code like below.

    <script>
        $(document).ready(function () {
            var table = $('#empview').DataTable({
                scrollY: "300px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                fixedColumns: {
                    leftColumns: 1,
                    rightColumns: 1
                }
            });
            $('#empview tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }


            });
            //var table1 = $('#empview').DataTable({
            //    scrollY: "300px",
            //    scrollX: true,
            //    scrollCollapse: true,
            //    paging: false,
            //    fixedColumns: {
            //        leftColumns: 1,
            //        rightColumns: 1
            //    }
            //});
        });
    </script>

Besides, for more about this warning, you could refer to https://datatables.net/manual/tech-notes/3 to know more.

Best Regards,

Jenifer

Answer 2

User-1355965324 posted

Many Thanks . but after freezing  the first column,  of the table , the back ground color of the selected row  is not being shown on the freezed column. The rest of the column background would be changed for the selected row but freezed column not. Please any help

This is my script. If you want detailed code I  will send 

<script>

    $(document).ready(function () {
        var table = $('#empview').DataTable({
            scrollY: "300px",
            scrollX: true,
            scrollCollapse: false,
            paging: false,
            fixedColumns: {
                leftColumns: 1

            }
        });
        $('#empview tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }


        });

    });
</script>

Answer 3

User839733648 posted

Hi polachan,

I suggest that you could add the following reference to your datatable and it well works well.

<link rel="stylesheet" href="https://cdn.datatables.net/keytable/2.4.1/css/keyTable.dataTables.min.css" />
<script src="https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js"></script>

my whole testing codes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/keytable/2.4.1/css/keyTable.dataTables.min.css" />
    <script>
        $(document).ready(function () {
            $('#empview').DataTable({
                scrollY: 300,
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                fixedColumns: true,
                select: true
            });
        });
    </script>
</head>
<body>
    <table id="empview" class="stripe row-border order-column nowrap" style="width:100%">
      //Your datas
    </table>
</body>
</html>

result:

Best Regards,

Jenifer