Whenever I am re-initialising my table after a change , Iam getting the following error !

punnuthebaap

Uncaught TypeError: aoColumns[srcCol] is undefined **
**
My Javascript Code is ::

function ViewMarksheet(data){
    // console.log(data);
    if(!data.isMarksheet){
            // to reinitialize the table on selection of different categories //
            var tableId = "#markEntryTable";
            var tableObj = $('#markEntryTable').dataTable();
            if (tableObj != null) {
                    tableObj.clear();
                    tableObj.destroy();
            }
            $(tableId + " thead").empty();
            $(tableId + " tbody").empty();
            // end to reinitialize the table on selection of different categories //
            var source=createNewMarksArray(data);
            const obj = {...source};
            var header=[];
            columnNames = Object.keys(source[0]);
            for (var i in columnNames) {
                  header.push({data: columnNames[i],title: capitalizeFirstLetter(columnNames[i])});
            }
            for(var i in columnNames){
                $("#markEntryTable>thead>tr").append("<th>"+capitalizeFirstLetter(columnNames[i])+"</th>");
            }
            $('#markEntryTable').DataTable({
                    // processing: true,
                    data: source,
                    searching: true,
                    columns: header,
                    paging: false,
                    info: true,
                    order: [
                                [1, 'asc']
                        ],
                    language: {
                            emptyTable: "No data available "
                    },
            });
            $('#markEntryTable').css("width", "100%");
            $('#viewMarkEntryTable').css("display", "block");
        }  
}

My HTML code is ::

<section class="content">
    <div class="container-fluid">
        <!--  <div class="block-header">
            <h2><?php echo $title; ?></h2>
        </div> -->
        <!-- Input -->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <h2>
                        <?php echo $title; ?>
                        <!-- <small>Kindly provide the details for the new class</small> -->
                        </h2>
                    </div>
                    <div class="body">
                        <form id="mark_entry_form" method="POST">
                            <div class="col-sm-4">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <select id="classMarkEntry" name="class" class="form-control show-tick" required>
                                            <option value="">Select a class</option>
                                           <?php foreach($class as $item){
                                            echo '<option value="' . $item['class'] . '">' . $item['class'] . '</option>';
                                            }
                                        ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <select name="section" id="sectionMarkEntry" class="form-control show-tick" required>
                                            <option value="">Select a section </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <select name="exam_type" id="examTypeMarkEntry" class="form-control show-tick" required>
                                            <option value="">Select Exam Type </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!-- <div class="col-md-4">
                                    <button id="onAddHoliday" class="btn btn-block bg-pink waves-effect" type="submit">Add Holiday</button>
                                </div> -->
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div id="viewMarkEntryTable" style="display: none;" class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <h2>
                             Enter Marks
                        </h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive body">
                            <table id="markEntryTable" class="table table-bordered table-striped table-hover dataTable js-exportable">
                                <thead>
                                    <tr>
                                        <!-- <th>Admission No.</th>
                                        <th>Student Name</th> -->
                                    </tr>
                                </thead>
                                <tbody id="ClassTableBody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
</script>

PLEASE HELP ME ASAP !!

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

punnuthebaap

Okay sure , give me some time !