The jQuery DataTables plugin provides a wide variety of extensions that can enhance the functionality of the plugin dramatically.
To see a list of all available extensions for the DatatTables library, see https://datatables.net/extensions/index
The ColReorder extension allows users to reorder table columns by clicking and dragging the column header to the location they prefer. To enable column reordering for your DataTables HTML table, complete the following steps:
_Layout.cshtml
file and add a reference to the dataTables.colReorder.css
file:<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net /colreorder/1.3.1/css/colReorder.bootstrap.min.css" />
.cshtml
file and add a reference to the DataTables
colReorder
extension JavaScript file:<script type="text/javascript" charset="utf8" src="//cdn.datatables.net /colreorder/1.3.1/js/dataTables.colReorder.min.js"></script>
DataTables
plugin and the colReorder extension after the page has loaded:$('#customer-table').DataTable({ colReorder: true });
Notice that all the style sheets and JavaScript files for the extensions are referenced from the DataTables
CDN. The CDN is available at cdn.datatables.net
The ColVis extension adds a button to the top of a DataTable, which, when clicked on, displays a list of column names in the table with a checkbox next to it. The user can then deselect the column names they do not wish to see in the grid.
To enable the column visibility extension, perform the following steps:
_Layout.cshtml
file and add a reference to the Bootstrap 4-specific stylesheet of the DataTables
buttons extensions:<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net /buttons/1.1.2/css/buttons.bootstrap4.min.css" />
view.cshtml
file and add a reference to the DataTables
buttons extension, the Bootstrap 4-specific buttons extension, as well as the buttons ColVis extension:<script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"> </script> <script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.bootstrap4.min.js"> </script> <script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.colVis.min.js"> </script>
DataTables
plugin and the ColVis extension after the page has loaded:$('#customer-table').DataTable({ dom: 'Bfrtip', buttons: [ 'colvis' ] });
The code in the last step uses the dom
parameter in order to specify where the control element is placed in the DOM. For buttons, use the letter B
. When navigating to the view, you should see a button next to the search box with which you can show or hide columns in the table, as shown in the following screenshot:
Using the same DataTables
extension, you can add a toolbar to the table with which the user can copy the data inside the table to the clipboard or present a print view of the data inside the table. It is a really simple way to give your users the ability to export or print their data.
To enable the copy and print functionality for the tables, perform the following steps:
_Layout.cshtml
file and add a reference to the Bootstrap 4-specific stylesheet of the DataTables
buttons extensions:<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net /buttons/1.1.2/css/buttons.bootstrap4.min.css" />
DataTables
Buttons extension, the Bootstrap 4-specific buttons extension, the HTML 5 buttons extension, as well as the print button extension:<script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"> </script> <script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.bootstrap4.min.js"> </script> <script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"> </script> <script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"> </script>
$(document).ready(function () { $('#customer-table').DataTable({ dom: 'Bfrtip', buttons: [ 'copy', 'print' ] }); });
When opening the view with the DataTable, you should see two buttons above the DataTable, as shown in the following screenshot:
When the user clicks on the Copy button, they should see a message informing them that the number of rows in the table has been copied to their clipboard:
If the user clicks on the Print button, a new browser window will open with a printer friendly version of the data inside the DataTable and the print dialog will be displayed:
3.139.239.41