Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » Samples » Revisions
 
Go to top

Refreshing content of the Datatable using Ajax in ASP.NET MVC (jQuery DataTables and ASP.NET MVC integration - Part III)

, 20 Feb 2012
Rate this:
Please Sign up or sign in to vote.
This article shows how you can refresh content of the table in ASP.NET MVC using the jQuery DataTables plug-in.
This is an old version of the currently published article.

Table of content

  1. Introduction
  2. Using the code
    1. Model
    2. View
    3. Controller
  3. Summary

Introduction

JQuery DataTables plugin is an excellent JQuery library that enables you to create fully ajaxified tables with a minimal effort. To create ajaxified table with JQuery DataTables plugin you will need to implement following elements:

  1. Put an empty table in the HTML of the page. This empty table will define structure of the table (e.g. columns, styles, etc). table should have only heading in the THEAd element, empty body, and optional footer in the TFOOT element. Rows in the table are not required because they will be loaded via Ajax call.
  2. Create some server-side page that will provide rows to the table when it is called via ajax. in this artice will be implemented ASP.NET MVC controller that will provide data rows to the table.
  3. Initiate JQuery DataTables plugin to load table content from the controller.

As an result, instead of the empty table you will get fully ajaxified table where JQuery DataTables has automatically added pagination, sorting by table headings, and filtering by keyword.

You can find detailed instruction about the integration of JQuery DataTables plugin with the ASP.NET MVC controller in the jQuery DataTables and ASP.NET MVC Integration - Part I article.

Once you implement controller and initialize JQuery DataTables plugin, it will handle complete interaction with the user. Each time user change state of the table (e.g. change page using pagination, sort rows by column, or perform some search) DataTables plugin will send information to the controller and refresh the content of the table.

However, in some cases you will need to refresh the table content manually. Refreshing table content is common requirement in many applications - some example are:

  1. You migh want to add refresh button that enables user to refresh the data displayed in the table.
  2. You migh want to implement some periodical refresh of table content to provide the latest data to user (e.g. some live scores implementation).
  3. You might want to implement some kind of ajaxified search where user enters search criterion in the form and you want to refresh data in the table without refreshing whole page.
  4. You might want to add some master table or drop-down so when user select some value in the table or dropdown, you might want to refresh dependent table.
  5. You might want to add some filter to the table where user will type some text or select some value in the dropdown list, so you will need to refresh the table content to match filter.

To implement these scenarios you will need to refresh DataTables content. Goal of this article is to show how you can do it with API provided by JQuery DataTables plugin.

This is a third article in the series explaining how the jQuery DataTables plugin can be integrated into the ASP.NET MVC web application. If you are not familiar with the integration of the DataTables plug-in with ASP.NET MVC server-side code, you might want to read the first article in this series before you proceed.

Using the code

For illustrative purposes, we'll use a simple ASP.NET MVC web application to list the employees. The first thing you need to do is to create a standard ASP.NET Model-View-Controller structure. There are three steps required for this setup:

  1. Creating the model classes that represent a data structure to be shown.
  2. Creating the controller class that will react on the user events.
  3. Creating the view that will render data and create the HTML code that is sent to the browser window.

Also, you will need to include some JavaScript components in your project. The following JavaScript components need to be downloaded:

  1. jQuery library v1.4.4., containing the standard classes used by the DataTables plug-in.
  2. jQuery DataTables plug-in v1.7.5., including the optional DataTables CSS style-sheets used for applying the default styles on the page.

These files should be stored in the local file system and included in the HTML page that is rendered on the client. An example of usage of these files is explained below.

Model

Two classes that contain information about companies and employees need to be added in the example. The classes are shown in the following listing:

public class Company
{
        public int ID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string Town { get; set; }
}  
public class Employee
{
        public int EmployeeID { get; set; }
        public string Name { get; set; }
        public string Position { get; set; }
        public int CompanyID { get; set; }
} 

The employees are connected to the companies via the CompanyID property. These classes will be used to show information on the page.

View

The view is used to render data on the server-side and to send HTML code to the browser. There's one layout page that is used to include all the necessary CSS and JavaScript files that are used on the page. This layout page is shown below:

<!DOCTYPE html>
<html>
    <head>
        <title>Refreshing table content using a JQuery DataTables plugin</title>
        <link href="@Url.Content("~/Content/dataTables/demo_page.css")" 
           rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/dataTables/demo_table.css")" 
           rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/dataTables/demo_table_jui.css")" 
           rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" 
           rel="stylesheet" type="text/css" media="all" />
       
 <link 
     href="@Url.Content("~/Content/themes/smoothness/
                jquery-ui-1.7.2.custom.css")"rel="stylesheet"
     type="text/css" media="all" />
        <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" 
          type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.dataTables.min.js")" 
          type="text/javascript"></script>
        @RenderSection("head", required: false)
    </head>
    <body id="dt_example">
        <div id="container">
            <a href="http://www.codeproject.com/Home/Index">Master/Details Table</a>
            @RenderBody()
        </div>
    </body>
</html>

The layout page has two sections that can be populated on the page:

  1. head section where the JavaScript calls from the page will be injected,
  2. body section that enables the page that uses this layout page to inject code to the page that will be shown on the page.

Case 1 - Adding "Refresh" button

In the first example I will show how you can add Refresh button that will reload a content of the table when user press it. As described above we would need one empty table that holds table data and one refresh button. Body of the page is shown in the following listing:

<div id="demo">
    <button id="Refresh" type="button">Refresh<button/>

    <table id="employees" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Employee</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div> 

Once we have prepared static HTML, we would need to initialize DataTables plugin, and attach click handler to the refresh button that will

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

        var oEmployeesTable = $('#employees').dataTable({
            "bJQueryUI": true,
            "bServerSide": true,
            "sAjaxSource": "MasterDetailsAjaxHandler"
        });

        $("#Refresh").click(function (e) {
            oEmployeesTable.fnDraw();
        });
    });
</script> 

The first statement in the document ready function applies DataTables plugin on the emplyees table, specified that it will work in the server-side mode (meaning that on each user action plugin will ask server-side page to provide new data that should be displayed), defines that URL that will be called via ajax call is MasterDetailsAjaxHandler - this is a path of the controller that will provide content of the table. bJQueryUI flag is not mandatory - it is just used to apply JQuery UI styles to the table.

When table is initialized, in the code is added click handler for the refresh button that will draw content of the table. On each draw call, DataTables plugin will call server-side page again, and take the new set of data which will be loaded in the table body.

Controller that provides content is described in the section controller.

Case 2 - Refreshing table content periodically

if you do not want to force user to refresh the table, you can add function that will be periodically called to refresh the table. Code is very similar to the code shown in the case 1. The only difference is that refresh button is not needed and instead of te click handler is used set interval function as the one shown in the following listing:

self.setInterval("refresh()",1000);
function refresh()
{
     oEmployeesTable.fnDraw();
}

First parameter of the setinterval function is code that will be execuded and the second one is interval in miliseconds. In this case, DataTable will be refreshed each 5 seconds.

Case 3 - Refreshing table content when parent row is selected

In this example I will shown how you can refresh content of the dependent table (employees) when some company is selected in the master table. In this case we will have two tables - one parent table containing the list of companies and the other child table containing the list of employees. Example of that kind of page is shown in the following figure:

ParentChildDataTables.png

When user selects the company in the master table, in the child table will be shown employees that belong to this company. The body of the page is shown in the following listing:

<div id="demo">
    <table id="companies" class="display">
        <thead>
            <tr>
                <th>Company name</th>
                <th>Address</th>
                <th>Town</th>
            </tr>
        </thead>
        <tbody>
            <tr id="0" class="masterlink">
                <td>Emkay Entertainments</td>
                <td>Nobel House, Regent Centre</td>
                <td>Lothian</td>
            </tr>
            <tr id="1" class="masterlink">
                <td>The Empire</td>
                <td>Milton Keynes Leisure Plaza</td>
                <td>Buckinghamshire</td>
            </tr>
            <tr id="2" class="masterlink">
                <td>Asadul Ltd</td>
                <td>Hophouse</td>
                <td>Essex</td>
            </tr>
            <tr id="3" class="masterlink">
                <td>Ashley Mark Publishing Company</td>
                <td>1-2 Vance Court</td>
                <td>Tyne &amp; Wear</td>
            </tr>
            <tr id="4" class="masterlink">
                <td>MuchMoreMusic Studios</td>
                <td>Unit 29</td>
                <td>London</td>
            </tr>
            <tr id="5" class="masterlink">
                <td>Audio Records Studios</td>
                <td>Oxford Street</td>
                <td>London</td>
            </tr>
        </tbody>
    </table>

    <table id="employees" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Employee</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div> 

The first table with companies contains a list of five companies, and the employees table is empty. The employees table will be populated with AJAX JavaScript calls. Each row in the companies table contains the ID of the company - this information will be used to load the employees for the selected company.

The head section holds the JavaScript code that initializes and connects these two tables. The JavaScript initialization code is shown in the following listing:

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

        /* Initialize master table - optionally */
        var oCompaniesTable = $('#companies').dataTable({ "bJQueryUI": true });
        /* Highlight selected row - optionally */
        $("#companies tbody").click(function (event) {
            $(oCompaniesTable.fnSettings().aoData).each(function () {
                $(this.nTr).removeClass('row_selected');
            });
            $(event.target.parentNode).addClass('row_selected');
        });

        var MasterRecordID = null;

        var oEmployeesTable = $('#employees').dataTable({
            "sScrollY": "100px",
            "bJQueryUI": true,
            "bServerSide": true,
            "sAjaxSource": "MasterDetailsAjaxHandler",
            "bProcessing": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "CompanyID", "value": MasterRecordID });
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json)
                });
            }
        });

        $(".masterlink").click(function (e) {
            MasterRecordID = $(this).attr("id");
            oEmployeesTable.fnDraw();
        });
    });
</script> 

The first two statements are optional. The first statement initializes the companies datatable with the jQuery DataTables plug-in in order to add pagination, filtering, and sorting functionality (this is not required for the parent-child relationship between the tables because the parent table can be a plain table). The second statement adds the row_selected class on the selected row in the parent table. This is also not required, but it's useful to highlight a company whose employees are shown in the child table.

A local variable MasterRecordID is used to hold the ID of the currently selected company. The fourth statement initializes the child employees table. Most of the settings are optional and do not affect the parent-child configuration because the only relevant statements in the initialization are:

  1. Server-side processing configuration implemented using the bServerSide and sAjaxSource parameters,
  2. fnServerData method used to inject the ID of the selected company into the AJAX call sent to the server-side. This method is used to add the additional parameter called CompanyID with the value of the MasterRecordID variable to the AJAX call sent to the server-side.

The last statement attaches the event handler which populates the ID of the selected row and forces the redraw of the child table on each click on a row in the parent table. Redrawing of the table sends an AJAX request to the server-side and updates the table with the employee records that belong to the selected company.

Case 4 - Filteirng using the form elements

Implementation of other cases of usage are similar the the three approaches described above. You can easily add some select dropdown, check boxes or even the entire form that will refresh the table content.

All you will need to do is to attach event handler that will call fnDraw function and inject parameters you want to send to the conteoller via Ajax call in the fnServerData settings in the initialization. When the fnDraw is called, DataTables plugin will send new Ajax request, pass parameters defined in the fnServerData, accept results, and put them in the table. therefore i will not show implementaitons of other cases because they are very similar.

If you want to refresh the using the form elements that are directly related to the columns in the table there is an easier option. You can use JQuery DataTables ColumnFilter add-on that can add form filters to the DataTable. You can see how this form filter works if you add the filters in the columns or in the separate form. This filter can be applied either on the row data that are alredy populated in the table or on the ajafified table. With this plugin you do not need to implement event handlers and ajax request. All you need to do is to apply column filter pluign on the DataTables plugin configured in the server side mode. Example of the code that initializes columnfilter pluign with DataTables in the server-side processing mode is shown in the following listing:

$('#employees').dataTable({
            "bJQueryUI": true,
            "bServerSide": true,
            "sAjaxSource": "MasterDetailsAjaxHandler"
        }).columnFilter({
            aoColumns: [ { type: "select"},
                     { type: "text" },
                     { type: "text" },
                     { type: "text" }
                ]
        }); 

This example add one select list for filtering by first column and text boxes for filtering by other columns. If DataTables plugin is initialized in the server-side mode, filters will be also sent to the server-side via Ajax calls. You can see more details about the column filter configuration on the JQuery DataTables ColumnFilter site.

The last required part of the example is a controller that will handle the requests.

Controller

The controller handles the request sent from the browser and provides view/data that will be shown in the browser. Here, the controller has two methods that handle a request:

  1. Load method that returns the view page when the page is loaded,
  2. Employees AJAX handler that returns the employees for the provider company ID.

The first controller method is fairly simple. This method just returns the view that will be shown in the browser, as shown in the following listing:

public class HomeController : Controller
{
    public ActionResult Index()
        {
            return View();
        }
}

The second controller method is crucial - it returns the employees for the employees table. This method is shown in the following listing:

public class HomeController : Controller
{
    public ActionResult MasterDetailsAjaxHandler(
             JQueryDataTableParamModel param, int? CompanyID)
    {

        var employees = DataRepository.GetEmployees();

        //"Business logic" method that filters employees by the employer id
        var companyEmployees = (from e in employees
                                where (CompanyID == null || e.CompanyID == CompanyID)
                                select e).ToList();

        //UI processing logic that filter company employees by name and paginates them
        var filteredEmployees = (from e in companyEmployees
                                 where (param.sSearch == null || 
                                 e.Name.ToLower().Contains(param.sSearch.ToLower()))
                                 select e).ToList();
        var result = from emp in filteredEmployees.Skip(
                     param.iDisplayStart).Take(param.iDisplayLength)
                     select new[] { Convert.ToString(emp.EmployeeID), 
                     emp.Name, emp.Position };

        return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = companyEmployees.Count,
            iTotalDisplayRecords = filteredEmployees.Count,
            aaData = result
        },
        JsonRequestBehavior.AllowGet);
    }
}

The name of the method must match the sAjaxSource parameter set in the employees data table. This method accepts an object that encapsulates the parameters sent from the DataTables plug-in (current page, sort direction, number of items that should be displayed per page, etc.) More details about the server side processing parameters can be found in the first article in this series. Besides this parameter, an additional parameter called CompanyID is added in the method signature. This parameters is relevant only for case three and it is used to filter employees by the selected company id. The name of this parameter must match the name of the parameter that is added in the fnServerData function in the case 3. The other code in the body of the method just filters the employee data and returns it in JSON format as it is expected by the jQuery DataTables plug-in. More details about the server-side configuration can be found in the first article in this series.

Summary

This article shows how you can easily reload table content in ASP.NET MVC using the jQuery DataTables plug-in. Minimal code is required on the client-side, and on the server-side we need standard processing functions. This plug-in allows you to create an effective, AJAXified, Web 2.0 interface with minimal effort and straightforward implementation guidelines. You can download the example project implemented in ASP.NET MVC here.

You might also be interested in the other articles in this series showing:

  1. How to implement server-side processing in ASP.NET MVC with the jQuery DataTables plug-in
  2. How to implement a fully editable table in ASP.NET MVC with jQuery DataTables and several jQuery plug-ins that enable complete data management functionality.

I hope that these articles would help you while implementing ASP.NET MVC applications.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jovan Popovic
Architect Gowi
Serbia Serbia
Started as a young scientist - winning the highest national awards in mathematics, physics, electrotechnics, and electronics.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia, as a first in the class, as a Master of Software Sciences.
Currently working in Gowi as a Software engineer, architect, and project manager since 2004 - mostly using Microsoft technologies (ASP.NET, C#). Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Software engineering process(estimation and standardization), mobile and business intelligence platforms.

Comments and Discussions


Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
 
GeneralVery good tutorial! PinmemberMember 1039974412-May-14 3:26 
QuestionCase 3 ! PinmemberMember 1017890713-Mar-14 12:35 
Questionplz help PinmemberMember 454743020-Oct-13 7:09 
QuestionCase 3 doesnt't work PinmemberMember 97134734-May-13 0:01 
QuestionKeep pagination/sorting/filtering settings Pinmember_koen_28-Apr-13 20:56 
Questionpassing a array using ajax from view page to cotroller Pinmemberabusalehrajib21-Mar-13 2:51 
GeneralMy vote of 5 PinmemberAbinash Bishoyi27-Feb-13 0:48 
Questionhow to create a new row in mvc Pinmemberraja.mstech31-Jan-13 19:37 
QuestionHTML Helper to create Table with datatables plugin PinmemberRajagcha8-Aug-12 8:43 
Bugajax.cshtml not working Pinmembersamthec11-May-12 4:47 
GeneralMy vote of 5 PinmemberAnurag Gandhi21-Apr-12 9:26 
GeneralMy vote of 5 Pinmemberpothiq26-Feb-12 19:21 
GeneralMy vote of 5 PinmemberMahmud Hasan26-Feb-12 16:43 
QuestionGreat Article Pinmemberzyck26-Feb-12 3:39 
GeneralMy vote of 5 PinmemberGreg Sipes22-Feb-12 10:54 
GeneralMy vote of 5 PinmemberPrasanta_Prince17-Apr-11 7:33 
GeneralOdlicno 5 PinmemberSlobodan12-Apr-11 11:02 
GeneralRe: Odlicno 5 PinmemberJovan Popovic13-Apr-11 21:25 
GeneralMy vote of 5 PinmemberArlen Navasartian8-Apr-11 4:34 
GeneralGood PinmemberSunasara Imdadhusen6-Apr-11 23:37 
GeneralError: Stuck on 'Processing' Pinmembervkuttyp6-Apr-11 4:34 
GeneralRe: Error: Stuck on 'Processing' PinmemberJovan Popovic6-Apr-11 5:02 
GeneralRe: Error: Stuck on 'Processing' Pinmembervkuttyp6-Apr-11 11:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140921.1 | Last Updated 20 Feb 2012
Article Copyright 2011 by Jovan Popovic
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid