DataTables fires a number of custom events which you can listen for through the on() and one()
methods, to let you know when the table has performed certain actions.
This example shows the use of the order, search and page events by adding a notification that the event fired to an
element on the page to show that they have indeed fired.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Airi Satou | Accountant | Tokyo | 33 | 2008-11-28 | $162,700 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009-10-09 | $1,200,000 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
| Bradley Greer | Software Engineer | London | 41 | 2012-10-13 | $132,000 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011-06-07 | $206,850 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012-12-02 | $372,000 |
| Bruno Nash | Software Engineer | London | 38 | 2011-05-03 | $163,500 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011-12-12 | $106,450 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011-12-06 | $145,600 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012-03-29 | $433,060 |
| Name | Position | Office | Age | Start date | Salary |
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // For the example - show interactions with the tablevar eventFired = function ( type ) { var n = document.querySelector('#demo_info'); n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>'; n.scrollTop = n.scrollHeight; }document.addEventListener('DOMContentLoaded', function () { let table = new DataTable('#example'); table .on('order', function () { eventFired( 'Order' ); }) .on('search', function () { eventFired( 'Search' ); }) .on('page', function () { eventFired( 'Page' ); });}); |
In addition to the above code, the following Javascript library files are loaded for use in this example: