Skip to content

13 DataTable Pagination Ordering and Searching a List

Jump to bottom
M. Fares edited this page Apr 20, 2018 · 6 revisions

See Procedure 36

The DataTables plugin can be used in two different modes:
Client-side - where filtering, paging and sorting calculations are performed on the client side.
Server-side - where filtering, paging and sorting calculations are performed on the server side.

In this tutorial, we will cover the dataTables on client side which is the default behavior.

  1. Install jquery.datatables package using NuGet
    This package adds two folders to your project:
    /Content/DataTables which includes images and css files
    /Script/DataTables which includes JavaScript files

  2. Add the style section to the layout file in the head part of the layout page
    /Views/Shared/_Layout.cshtml

<head>
...
@RenderSection("styles", required: false)
</head>

Note: If you want to include the script and style files in all views of your project, you may bundle the scripts and the styles (See /App_start/BundleConfig.cs file)

  1. Add the scripts and styles sections to the end of the view file with the following content:
    /Views/Employee/Index.cshtml
@section scripts
{
    <script type="text/javascript" src="@Url.Content("/Scripts/DataTables/jquery.dataTables.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("/Scripts/DataTables/dataTables.scroller.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("/Scripts/DataTables/dataTables.bootstrap.min.js")"></script>

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

@section styles
{
    <link href="@Url.Content("/Content/DataTables/css/jquery.dataTables.min.css")" rel="stylesheet"/>
    <link href="@Url.Content("/Content/DataTables/css/dataTables.scroller.min.css")" rel="stylesheet"/>
    <link href="@Url.Content("/Content/DataTables/css/dataTables.bootstrap.min.css")" rel="stylesheet"/>
}
  1. Add to your table the table header and the table body elements.
<thead>
...
</thead>

<tbody>
...
</tbody>
  1. Add the id attribute to your table. This id should be the same that is referenced by the JQuery Script in the scripts section.
<table id="employeesTable" class="display" width="100%" cellspacing="0">
...
</table>

  1. To test this code go to http://localhost/Employee

    DataTable Documentation

    Datatable Styling Examples

Clone this wiki locally