Adding DataTables to your ASP.NET MVC project

To add the basic functionality for the DataTables plugin, the following two files are required:

  • The first is jquery.dataTables.css and it contains the default CSS styling for the tables
  • The second is jquery.dataTables.js and it contains the JavaScript logic for rendering the DataTables plugin and adding the necessary functionality

Both these files are available at the DataTables CDN at the following links:

Using the DataTables Bower package

You can also add all the required CSS and JavaScript files needed for jQuery DataTables as well as all the CSS and JavaScript files for the extensions using Bower. Complete the following steps to add jQuery DataTables when using Bower:

  1. In Visual Studio, open the bower.json file. If you do not see the bower.json file inside the Visual Studio Solution Explorer, click on the Show All Files button.
  2. Add the following two packages to the list of dependencies inside the file:
            "datatables.net": "1.10.12", 
        "datatables.net-dt": "1.10.12"
  3. The datatables.net package will add the jQuery DataTables package to the wwwrootlib folder of your project and the datatables.net-dt package will add the base styling for jQuery DataTables.
  4. The datatables.net package contains the JavaScript file and the datatables.net-dt package will contain the CSS/Stylesheet for jQuery DataTables.

Using the CDN

You can either save the files from the aforementioned locations, add them to your project, or rather add a reference to the files hosted on the CDN. The latter option is the preferred approach and will help improve your site's performance.

To reference it from the CDN, complete the following steps:

  1. In Visual Studio, open this book's accompanying sample project and open the _Layout.cshtml file located inside the ViewsShared folder.
  2. Inside the <head> element of the _Layout.cshtml file, add a reference to the jQuery DataTables style sheet by inserting the following line of markup:
            <link rel="stylesheet" type="text/css" href="//cdn.datatables.net 
        /1.10.12/css/jquery.dataTables.css">
  3. Open the view in which you'll need the DataTables functionality and add a reference to the JavaScript library by adding the following code to the bottom of the view:
            @section scripts{ 
            <script type="text/javascript" language="javascript"         
            src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
            </script> 
        }

Adding Bootstrap styling to DataTables

The steps mentioned in the preceding section will add the minimum required files to the view and layout file in order to generate the basic styling and functionality for jQuery DataTables. However, the default DataTables CSS styles can look somewhat out of place in a Bootstrap website.

Luckily, the team behind the DataTables project created a Bootstrap-specific CSS style and JavaScript library to match the look and feel of your site. Both these files are also available on the DataTables CDN:

These two files are added in the same way as the normal DataTables CSS and JavaScript files. Bear in mind that when including the Bootstrap-specific DataTables JavaScript file in your view, you need to include a reference to both the default DataTables JavaScript files as well as the Bootstrap-specific file, as illustrated in the following markup:

@section scripts{ 
    <script type="text/javascript" language="javascript" 
      src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
     </script> 
    <script type="text/javascript" language="javascript" 
     src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap4.min.js">
    </script> 
   }
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.139.105.114