Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » Samples » Downloads
 
Add your own
alternative version

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

, 21 Apr 2012 CPOL
This article shows how you can refresh content of the table in ASP.NET MVC using the jQuery DataTables plug-in.
JQueryMasterDetailsDataTables.zip
JQueryMasterDetailsDataTables
bin
JQueryMasterDetailsDataTables.dll
Content
dataTables
images
back_disabled.jpg
back_enabled.jpg
favicon.ico
forward_disabled.jpg
forward_enabled.jpg
Sorting icons.psd
sort_asc.png
sort_asc_disabled.png
sort_both.png
sort_desc.png
sort_desc_disabled.png
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
smoothness
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Controllers
Global.asax
JQueryMasterDetailsDataTables.csproj.user
Models
obj
Debug
TempPE
Properties
Scripts
Views
Home
Shared
JQueryParentChildDataTables.zip
JQueryMasterDetailsDataTables.dll
JQueryMasterDetailsDataTables.pdb
back_disabled.jpg
back_enabled.jpg
favicon.ico
forward_disabled.jpg
forward_enabled.jpg
Sorting icons.psd
sort_asc.png
sort_asc_disabled.png
sort_both.png
sort_desc.png
sort_desc_disabled.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Global.asax
JQueryMasterDetailsDataTables.csproj.user
DesignTimeResolveAssemblyReferencesInput.cache
JQueryMasterDetailsDataTables.dll
JQueryMasterDetailsDataTables.pdb
JQueryRefreshDataTables.zip
JQueryParentChildDataTables
bin
JQueryParentChildDataTables.dll
Content
dataTables
images
back_disabled.jpg
back_enabled.jpg
favicon.ico
forward_disabled.jpg
forward_enabled.jpg
Sorting icons.psd
sort_asc.png
sort_asc_disabled.png
sort_both.png
sort_desc.png
sort_desc_disabled.png
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
smoothness
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Controllers
Global.asax
JQueryParentChildDataTables.csproj.user
Models
obj
Debug
TempPE
Properties
Scripts
Views
Home
Shared
@{
    Layout = "~/Views/Home/MasterDetailsLayoutPage.cshtml";
}


@section head{

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        /* Initialize master table - optionally */
        var oCompaniesTable = $('#companies').dataTable({ "bJQueryUI": true });
        /* Add a click handler to the rows - this could be used as a callback */
        $("#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("rel");
            oEmployeesTable.fnDraw();
        });
    });
</script>
}

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

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

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.

| Advertise | Privacy | Mobile
Web03 | 2.8.141022.2 | Last Updated 21 Apr 2012
Article Copyright 2011 by Jovan Popovic
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid