To add the basic functionality for the DataTables plugin, the following two files are required:
jquery.dataTables.css
and it contains the default CSS styling for the tablesjquery.dataTables.js
and it contains the JavaScript logic for rendering the DataTables
plugin and adding the necessary functionalityBoth these files are available at the DataTables CDN at the following links:
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:
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."datatables.net": "1.10.12", "datatables.net-dt": "1.10.12"
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
.datatables.net
package contains the JavaScript file and the datatables.net-dt
package will contain the CSS/Stylesheet for jQuery DataTables
.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:
_Layout.cshtml
file located inside the ViewsShared
folder.<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">
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> }
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> }
3.137.184.90