DataTables plugins

jQuery DataTables provides a lot of built-in features and flexibility, but if you wish to add your own features or need extra flexibility, it does provide a plugin architecture.

Note

These are just some of the plugins available for the DataTables library. To see a full list of available plugins, visit https://datatables.net/plug-ins/index

Date sorting

Because of the wide variety of different date formats, sorting dates can sometimes prove to be very challenging. Fortunately, jQuery DataTables provides a flexible solution for sorting date fields using the Moment.js JavaScript library.

Note

Moment.js is a free and open source library that makes it easy to display, parse, manipulate, and validate dates in JavaScript. You can read more about the Moment.js library at http://momentjs.com/.

To enable date sorting on the Created Date column used in the previous example, complete the following steps:

  1. Open the Index.cshtml file inside the ViewsCustomer folder.
  2. Include the moment.js library in your view by adding the following code to the end of the Index.cshtml file. Be sure to add it after the dataTables.bootstrap.min.js file:
            <script type="text/javascript" 
          src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js">        </script>
  3. Next, add the DataTables sorting plugin to the view by adding the following line after the moment.js file:
            <script type="text/javascript" src="//cdn.datatables.net/plug-
        ins/1.10.11/sorting/datetime-moment.js"></script>
  4. Finally, change the JavaScript code in the view to initialize the moment sorting library. You can specify the date format which should be sorted by passing it as a parameter:
            <script type="text/javascript"> 
            $(document).ready(function () { 
                $(document).ready(function () { 
                    $.fn.dataTable.moment('DD/MM/YYYY'); 
                    $('#customer-table').DataTable(); 
                }); 
            }); 
        </script>

Rendering

jQuery DataTables rendering plugins can be used to change the way data is displayed inside the table. In order to restrict data (in this example, the company name) to a particular length and showing anything longer as an ellipsis (...), for example, Northwind ..., complete the following:

  1. Open the Index.cshtml file inside the ViewsCustomer folder.
  2. Add the DataTables ellipsis data rendering plugin by including the following at the bottom of the view and after the jQuery DataTables library:
            <script type="text/javascript" src="//cdn.datatables.net/plug-
        ins/1.10.11/dataRender/ellipsis.js"></script>
  3. Change the DataTables initialization code to use the Ellipsis plugin. The targets parameter is used to specify which column to use the plugin on:
            $('#customer-table').DataTable({ 
            columnDefs: [{ 
                targets: 1, 
                render: $.fn.dataTable.render.ellipsis(15, true) 
            }] 
        });

The Ellipsis plugin accepts three parameters; the first is the number of characters to restrict the display to and the second is a boolean value that indicates whether the truncation should not occur in the middle of a word. The last boolean parameter is used to escape HTML entities.

..................Content has been hidden....................

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