datatable warning : cannot reinitialise data table please help

Reply

Member

285 Points

datatable warning : cannot reinitialise data table please help

Jan 23, 2019 10:36 PM|polachan|LINK

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

Reply

Jenifer Jian...

Contributor

2100 Points

705 Posts

Re: datatable warning : cannot reinitialise data table please help

Jan 24, 2019 07:30 AM|Jenifer Jiang|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

polachan

Member

285 Points

999 Posts

Re: datatable warning : cannot reinitialise data table please help

Jan 24, 2019 09:16 AM|polachan|LINK

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>

Reply

Jenifer Jian...

Contributor

2100 Points

705 Posts

Re: datatable warning : cannot reinitialise data table please help

Jan 28, 2019 10:05 AM|Jenifer Jiang|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

datatable warning : cannot reinitialise data table please help [Answered]RSS

3 replies

Shortcuts

datatable warning : cannot reinitialise data table please help

Re: datatable warning : cannot reinitialise data table please help

Re: datatable warning : cannot reinitialise data table please help

Re: datatable warning : cannot reinitialise data table please help