Part 44 - Integrate JQuery DataTables plugin into Asp.Net MVC application

In this video you will be able to add jquery datatable plugin into your project and to know how to use it. You just need to download latest version of Jquery DataTable . Click here to download the latest version of Jquery Datatable. 

After downloading the latest version, add the .css , .js file and images into your project as shown in above video. In the next step, include the DataTable.js and DataTable.css file reference into Layout Page. The expected output will be as what displayed in following image. 

 # View Page (Index.cshtml)

 Add below code in your Index page

</div>
    <table class="display" id="MyDataTable">
        <thead>
            <tr>
                <th>
                    EmaployeeName
                </th>
                <th>
                    Department
                </th>
                <th>
                    Salary
                </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>John</td>
                <td>CSE</td>
                <td>52000</td>
            </tr>
            <tr>
                <td>Sara</td>
                <td>EC</td>
                <td>52000</td>
            </tr>

         
        </tbody>

    </table>
<script>

    $(document).ready(function () {

        $("#MyDataTable").DataTable();
    })

</script>

Share this post