Example of Repopulating DataTables Grid After Searching

Question

I am new to using the DataTables Table plug-in for jQuery and have been able to retrieve data from a back end database and display it within a grid successfully. This is being done during $(document.ready()). I have created a page which presents some search criteria which would repopulate the table when the user submits the page. Can someone provide a simple example showing how to repopulate the new results with the table as a result of a submit? I'm using MVC as well which I'm also tackling for the first time which may be part of the problem.

Below is the jQuery code I've tried but it does not bind the results to the already existing table. I've also specified the ajax source only as well in the options thinking that the table already has the other options set and the ajax source is all that needs to be changed.

Thanks, Tom

$('#SubmitForm').on('submit', function (e) { 
    table = $('#grid').DataTable();
    table.sAjaxSource = "GetEmails";
    table.bServerSide = true;
    table.bProcessing = true;
    table.aoColumns = [
        { "sName": "Id" },
        { "sName": "Email" },
        { "sName": "Reason" },
        { "sName": "Name" },
        { "sName": "Organization" },
        { "sName": "Email_Verified_Date" }
    ];

    return true;
});

The browser only displays the output of the ajax source as shown below.

{"sEcho":null,"iTotalRecords":94,"iTotalDisplayRecords":94,"aaData":[]}

Below are excerpts of my views which show how I'm using the DataTable.

This works - notice the DataTable is rendered and populated during the page load via document.ready.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>How to use jQuery Grid with ASP.NET MVC</title>

    <script type="text/javascript">
        $(document).ready(function () {
            var oTable = $('#grid').dataTable({
                "bServerSide": true,
                "sAjaxSource": "home/GetEmails1",
                "bProcessing": true,
                "aoColumns": [
                                { "sName": "Id" },
                                {"sName": "Email"},
                                {"sName": "Reason"},
                                { "sName": "Name" },
                                { "sName": "Organization" },
                                { "sName": "Email_Verified_Date" }
                ]
            });
    });

    </script>
</head>
<body>
    <div class="table-responsive">
        <table id="grid">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Email</th>
                    <th>Reason</th>
                    <th>Name</th>
                    <th>Organization</th>
                    <th>Email Verified Date</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>
</html>

This is the second view that does not work. Here I am attempting to take search criteria, submit and populate the table with the search results. Both the ajax calls from the working example above and the non-working example here return the same results from the ajax call. I included the page load example in this view as well thinking that this may help that the DataTable is already initialized for when the search is completed and its to be repopulated. Thanks for your help!

@model MvcMovie.Models.ACORD360VerifiedEmail

@{
    ViewBag.Title = "Home Page";
}

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Search Page</title>

        <script type="text/javascript">
            $(document).ready(function () {

                var oTable = $('#grid').dataTable({
                    "bServerSide": true,
                    //"sAjaxSource": "GetEmails",
                    "sAjaxSource": "GetEmails",
                    "bProcessing": true,
                    "aoColumns": [
                                    { "sName": "Id" },
                                    { "sName": "Email" },
                                    { "sName": "Reason" },
                                    { "sName": "Name" },
                                    { "sName": "Organization" },
                                    { "sName": "Email_Verified_Date" }
                    ]
                });

        $('#SubmitForm').on('submit', function (e) { //use on if jQuery 1.7+
            table = $('#grid').DataTable();
            table.ajax.reload();

            return true;
        });
    })
        </script>
    </head>
    <body>
    @using (Html.BeginForm("GetEmails", "ACORD360VerifiedEmail", FormMethod.Post, new { id = "SubmitForm" }))
    {
        <div class="panel-body">
            <h2>Lyris - ACORD360 Integration</h2>
            <p class="lead">This allows you to modify Lyris and ACORD360 email data.</p>
        </div>

        <div class="row">
            <div class="col-md-3">
                @Html.LabelFor(m => m.EmailVerifiedStartDate)
                @Html.TextBoxFor(m => m.EmailVerifiedStartDate,
          new { @class = "form-control date-picker", placeholder = "Enter date here", id = "EmailVerifiedStartDate" })
            </div>
            <div class="col-md-3">
                @Html.LabelFor(m => m.EmailVerifiedEndDate)
                @Html.TextBoxFor(m => m.EmailVerifiedEndDate, new { @class = "form-control date-picker", placeholder = "Enter date here", id = "EmailVerifiedEndDate" })
            </div>
            <div class="col-md-3">
                @Html.LabelFor(m => m.OrganizationName)
                @Html.TextBoxFor(m => m.OrganizationName)
            </div>
            <div>
                <input type="submit" value="Search" />
            </div>
        </div>
        <br /><br /><br />
        <div class="table-responsive">
            <table id="grid">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Email</th>
                        <th>Reason</th>
                        <th>Name</th>
                        <th>Organization</th>
                        <th>Email Verified Date</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-md-12">
                <br /><br />
                <label id="Error"></label>
                <label id="Info"></label>
            </div>
        </div>
    }
    </body>
</html>

Brian Kates Brian Kates · Accepted Answer · 2016-07-26T14:36:32

In your second example, it doesn't look like your changing any of the data:

$('#SubmitForm').on('submit', function (e) { //use on if jQuery 1.7+
        table = $('#grid').DataTable();
        table.ajax.reload();

        return true;
});

On submit, you're reloading the table and then posting the form. If you're going to ajax source your data, use jquery to post the data and then on success reload the table:

$.ajax({
   url: url, type: 'POST',
   success: function() {

       table.ajax.reload();
   }
    }).fail(function() {
        alert("Sorry. Server unavailable.");
     });

Example of Repopulating DataTables Grid After Searching

2 Answers