How to handle events using jQuery DataTables plugin?
Last Updated :
18 Jan, 2021
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. It is a simple-to-use jQuery plug-in with a huge range of many options for the developer’s custom changes. The common features of DataTables are sorting, searching, pagination, and multiple-column ordering.
In this article, we will learn to handle jQuery events using the plugin.
The pre-compiled files which are needed to implement are
Approach: We have an HTML table with student’s data like ID, name, age, gender, and marks scored by each of them. Another “div” with id as resultID is taken to show the result for the event triggered by the user. The plugin’s datatable is initialized with the table id in the JavaScript part of the code. The events are dealt by using jQuery’s on() method. The DataTable plugin’s row().data() method is used to get information about the selected row by the user.
Example: The following example demonstrates handling jQuery events using the DataTable plugin.
HTML
<!DOCTYPE html>
< html >
< head >
< meta content=" initial-scale = 1 ,
maximum-scale = 1 ,
user-scalable = 0 "
name = "viewport" />
< meta name = "viewport"
content = "width=device-width" />
< link rel = "stylesheet"
href =
< script type = "text/javascript"
src =
< script type = "text/javascript"
src =
</ head >
< body >
< h2 >Handling events in Datatable </ h2 >
< table id = "tableID" class = "display"
style = "width:100%" >
< thead >
< tr >
< th >StudentID</ th >
< th >StudentName</ th >
< th >Age</ th >
< th >Gender</ th >
< th >Marks Scored</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >ST1</ td >
< td >Prema</ td >
< td >35</ td >
< td >Female</ td >
< td >320</ td >
</ tr >
< tr >
< td >ST2</ td >
< td >Wincy</ td >
< td >36</ td >
< td >Female</ td >
< td >170</ td >
</ tr >
< tr >
< td >ST3</ td >
< td >Ashmita</ td >
< td >41</ td >
< td >Female</ td >
< td >860</ td >
</ tr >
< tr >
< td >ST4</ td >
< td >Kelina</ td >
< td >32</ td >
< td >Female</ td >
< td >433</ td >
</ tr >
< tr >
< td >ST5</ td >
< td >Satvik</ td >
< td >41</ td >
< td >male</ td >
< td >162</ td >
</ tr >
< tr >
< td >ST6</ td >
< td >William</ td >
< td >37</ td >
< td >Female</ td >
< td >372</ td >
</ tr >
< tr >
< td >ST7</ td >
< td >Chandan</ td >
< td >31</ td >
< td >male</ td >
< td >375</ td >
</ tr >
< tr >
< td >ST8</ td >
< td >David</ td >
< td >45</ td >
< td >male</ td >
< td >327</ td >
</ tr >
< tr >
< td >ST9</ td >
< td >Harry</ td >
< td >29</ td >
< td >male</ td >
< td >205</ td >
</ tr >
< tr >
< td >ST10</ td >
< td >Frost</ td >
< td >29</ td >
< td >male</ td >
< td >300</ td >
</ tr >
< tr >
< td >ST11</ td >
< td >Ginny</ td >
< td >31</ td >
< td >male</ td >
< td >560</ td >
</ tr >
< tr >
< td >ST12</ td >
< td >Flod</ td >
< td >45</ td >
< td >Female</ td >
< td >342</ td >
</ tr >
< tr >
< td >ST13</ td >
< td >Marshy</ td >
< td >23</ td >
< td >Female</ td >
< td >470</ td >
</ tr >
< tr >
< td >ST13</ td >
< td >Kennedy</ td >
< td >43</ td >
< td >male</ td >
< td >313</ td >
</ tr >
< tr >
< td >ST14</ td >
< td >Fiza</ td >
< td >31</ td >
< td >Female</ td >
< td >750</ td >
</ tr >
< tr >
< td >ST15</ td >
< td >Silva</ td >
< td >34</ td >
< td >male</ td >
< td >985</ td >
</ tr >
</ tbody >
</ table >
< br />
< div id = "resultID" ></ div >
< script >
$(document).ready(function() {
var datatable = $('#tableID').DataTable();
$('#tableID tbody').on('click', 'tr', function ()
{
var data = datatable.row( this ).data();
$("#resultID").show().html("< b >User clicked on</ b > "
+data[0]+' row '+
'< b > with Name:</ b > '
+data[1]+ '< b > ,Age:</ b > '+data[2]+'< b > ,Marks:</ b > '
+data[4]);
});
});
</ script >
</ body >
</ html >
|
Output:
- Before row-click event:
- After row-click event:
Share your thoughts in the comments
Please Login to comment...