My JQuery Data Tables Did Not Load After Page Load?

On MVC when I try to table load JQuery DataTable on the page load it does not attach to my HTML table.

When I use the AJAX onComplete to trigger the JQuery table load it works fine.

My JQuery table load routine:
function onEMailNotificationsComplete() {
    alert("onEMailNotificationsComplete");
    $('#email-notifications-results table').dataTable({
        "bFilter": true,
        "bSort": true,
        "bLengthChange": false,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "sDom": "<'row'<'col-md-6'i><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
        "bInfo": true
    });
}

HTML Table:
<table id="email-notifications-results" class="table table-bordered table-striped table-hover"> 
        <thead>
            <tr>
                <td>
                    <strong>Date E-Mail Sent</strong>
                </td>
                <td>
                    <strong>Applicant Id</strong>
                </td>
                <td>
                    <strong>Person Name</strong>
                </td>
                <td>
                    <strong>Background Check Results</strong>
                </td>
            </tr>
        </thead>
        <tbody>
            @foreach (var emailNotification in Model)
            {
                var dateEMailSent = emailNotification == null ? "" : emailNotification.DateEMailSent.ToShortDateString();

                <tr>
                    <td>
                        @Html.DisplayFor(model => dateEMailSent)
                    </td>
                    <td>
                        @Html.DisplayFor(model => emailNotification.ApplicantId)
                    </td>
                    <td>
                        @Html.DisplayFor(mode => emailNotification.PersonName)
                    </td>
                    <td>
                        @Html.DisplayFor(mode => emailNotification.BackgroundCheckResults)
                    </td>
                </tr>
            }
        </tbody>
    </table>

Open in new window


Thanks,

Dan
danielolorenzAsked:
Who is Participating?
 
Chris StanyonCommented:
Look like your selector is wrong. Your table has the id of email-notifications-results, so your selector should be:

$('table#email-notifications-results').dataTable({

not

$('#email-notifications-results table').dataTable({
0
 
danielolorenzAuthor Commented:
Your solution worked.

Thanks,

Dan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.