Simple Ajax scenario in ASP.NET MVC Part 2: integrating jQuery DataTables with our Ajax call

This follows part 1.

My previous example of filtering a table was pretty basic. Let’s complicate things a little bit. While online examples are often simplistic, programming a real application isn’t.

Let’s integrate the common jQuery DataTables plugin to our table. Doing so will provide many functionalities but will break our last example.

Let’s see how and what we can do to fix it.

First install jQuery DataTables. You can get the NuGet package, download the files online and include them manually in your project or link to the CDN.

For the sake of simplicity I will link to the CDN in my _Layout.cshtml file.

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, 
          initial-scale=1.0">
    <title>@ViewBag.Title - ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <link rel="stylesheet" 
          type="text/css" 
          href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">

And later in this same file…

    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript" 
            charset="utf8" 
            src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js">
    </script>
    @Scripts.Render("~/bundles/bootstrap")

Now let’s call the plugin on the page with our existing table by adding this at the end of Index.cshtml:

@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#deparment-table').DataTable();
        });
    </script>    
}

And adding an id to our table in our DepartmentsTablePartial.cshtml partial view.

<table id="deparment-table" class="table table-striped">

As we can see we now have a full featured data table with filtering, sorting and paging.

Sadly when we make our Ajax call to get all the data instead of a filtered subset we loose the DataTables functionalities.

This is because jQuery DataTables isn’t aware of our Ajax update. We are rewriting the content inside the div but we aren’t making the plugin aware of this fact. Luckily there is a function available in the plugin API to handle that scenario.

We need to change our Ajax Helper BeginForm call to include an OnSuccess function:

@using (Ajax.BeginForm("FilterDepartmentsAjax",
               new AjaxOptions
               {
                   HttpMethod = "POST",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "department-table",
                   OnSuccess = "tableUpdated",
               }))

And our Scripts section will now contain a tableUpdated function.

<script type="text/javascript">
    $(document).ready(function () {
        $('#deparment-table').DataTable();
    });

    function tableUpdated() {
        $('#deparment-table').DataTable().draw();
    }
</script>    

It might be counter-intuitive that we aren’t using the Ajax functions of DataTables but this is because we our handling the Ajax call through our MVC controller. The MVC Ajax Helper is already updating the table and we just want DataTables to take notice of it.

DataTables ajax.reload() expect a JSON data source and we have none to give it. We simply want to data table to redraw itself.

If we start out site again everything is now working:

As before you can find the code on GitHub here and the specific change set here.