mData

SimonPrice33

Hi,

I have two tables on a a page in bootstrap tabs, and I am getting an error as per the below code snippet and would be grateful for some help.

This is the error

TypeError: Cannot read property 'mData' of undefined
    at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery.js:370)
    at jQuery.fn.init.each (jquery.js:137)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery.js:370)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.n [as dataTable] (jquery.dataTables.min.js:83)
    at jQuery.fn.init.h.fn.DataTable (jquery.dataTables.min.js:165)
    at Object.Into.scholarships.setDataTables (site.min.js?v=iVBwVLaXp10JpZIfRuBIGVCsXGHR9B8HoG76Bn8CQEY:31)
    at HTMLDocument.eval (eval at <anonymous> (jquery.js:349), <anonymous>:9:31)
site.min.js?v=iVBwVLaXp10JpZIfRuBIGVCsXGHR9B8HoG76Bn8CQEY:31 

This is the HTML

<div class="container">
    <div id="scholarships" class="l-text-block">
        <div class="col-md-12 col-sm-12">
            <div class="nav nav-tabs" id="myTab">
                <a class="nav-item nav-link active" id="ukscholarship-tab" data-toggle="tab" href="#ukscholarship" role="tab">UK Scholarships</a>
                <a class="nav-item nav-link" id="usscholarship-tab" data-toggle="tab" href="#usscholarship" role="tab">US Scholarships</a>
            </div>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="ukscholarship" role="tabpanel" aria-labelledby="home-tab">
                    <table id="ukScholarshipsTable" class="display">
                        <thead>
                            <tr>
                                <th>Centre</th>
                                <th>Maximum Value </th>
                            </tr>
                        </thead>
                        <tfoot style="display: none">
                            <tr>
                                <th>Centre</th>
                                <th>Maximum Value </th>
                            </tr>
                        </tfoot>
                        <tbody>
                                    <tr>
                                        <td class="scholarship-table-name">
                                            <a href="/en-gb/Universities/Scholarships">Glasgow Caledonian University</a>
                                        </td>
                                        <td>&#xA3;5,000.00</td>
                                    </tr>
                                    <tr>
                                        <td class="scholarship-table-name">
                                            <a href="/en-gb/Universities/Scholarships">University of East Anglia</a>
                                        </td>
                                        <td>&#xA3;5,472.50</td>
                                    </tr>
                                    
                        </tbody>

                    </table>
                </div>
                <div class="tab-pane fade" id="usscholarship" role="tabpanel" aria-labelledby="profile-tab">
                    <table id="usScholarshipsTable" class="display">
                        <tr>
                            <th>Centre </th>
                            <th>Maximum Value </th>
                        </tr>
                                <tr>
                                    <td class="scholarship-table-name">
                                        <a href="/en-gb/Universities/Scholarships">Washington State University</a>
                                    </td>
                                    <td>&#xA3;16,000.00</td>
                                </tr>
                                <tr>
                                    <td class="scholarship-table-name">
                                        <a href="/en-gb/Universities/Scholarships">Saint Louis University</a>
                                    </td>
                                    <td>&#xA3;20,000.00</td>
                                </tr>
                               
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
        try {
            Into.scholarships.setDataTables("ukScholarshipsTable");
        } catch (ukError) {
            console.log(ukError);
        }
        try {
            Into.scholarships.setDataTables("usScholarshipsTable");
        } catch (usError) {
            console.log(usError);
        }
    });
</script>



Into.scholarships.setDataTables = function (tableId) {
    $('#' + tableId).DataTable({
        "lengthMenu": [[-1], ["All"]]
    });
    $("#" + tableId + "_info").hide();
    $("#" + tableId + "_paginate").hide();
    $("#" + tableId + "_length").hide();
    $("#" + tableId + "_filter").hide();
}

The only thing that I can think of is that its to do with the currency symbol that is coming from .Net as the string\decimal object is being turned into currency, but I need this to be as is.

Any help and suggestions on how to fix this would be great.

SimonPrice33

Ignore this... i think i found my issue, no table head, footer or body...

colin

Yep, that'll do it