JQuery dataTables header click custom event
How to add custom click event for some table headers in datatable. I removed the default sort event from every column except the 1st column. So I want to add a custom event to these columns. And I want to find the index of the column that the user clicked on.
What I have tried so far is this. But I can't figure out how to find the index of the user clicked on the column.
var table = $('#example').dataTable( {
"data": data_set,
"columns": column_titles,
"columnDefs": column_defs
} );
$('#example thead').on( 'click', 'th', function () {
alert( 'Column clicked on: ');
} );
PS I found this article https://datatables.net/reference/api/column () .header () and followed. But when I call table.cell () it gives an error.
$('#example tbody').on( 'click', 'td', function () {
var idx = table.cell( this ).index().column;
var title = table.column( idx ).header();
alert( 'Column title clicked on: '+$(title).html() );
} );
source to share
It's been a long time since I've been using DataTables, but I think you can achieve this with cell().index()
. Check the doc: https://datatables.net/reference/api/cell () .index ()
$('#example thead').on('click', 'th', function () {
alert( 'Column clicked on: ' + table.cell(this).index().column);
});
source to share
http://jsfiddle.net/zwkggt7r/3/
Try
$(document).ready(function() {
var table = $('#example').dataTable();
table.on('click', 'th', function() {
var info = table.fnSettings().aaSorting;
var idx = info[0][0];
alert(idx);
});
});
source to share
The code snippet I found was correct except for one small part.
Using the below code it creates the dataTable correctly.
var table = $('#example').dataTable( {
"data": data_set,
"columns": column_titles,
"columnDefs": column_defs
} );
But it does not select the table correctly. So when I try to access the table object it doesn't have a "cell" method.
The code should be adjusted as
var table = $('#example').DataTable( {...
So now the table has a "cell" method.
So the final code will be as shown below.
var table = $('#example').DataTable( {
"data": data_set,
"columns": column_titles,
"columnDefs": column_defs
} );
$("#example").find("thead").on('click', 'th', function(){
var col_idx = table.column(this).index();
console.log("colId = " + col_idx);
});
source to share
You get the index when you click on the headers like this:
$('#example thead').on('click', 'th', function () {
var index = table.column(this).index();
alert('index : '+index);
});
This works with hidden columns, reordered columns, and so on.
script -> http://jsfiddle.net/1kjooq9w/
source to share
You can easily do this with the order method of the table. My technique works well.
We need to do two things here.
- Get the current index of a column
- Apply ascending or descending action on a specific column when the icon is clicked
Here, let's say we have a button or link that we click to bind to.
$(".arrow-sort-ascending").bind("click", {
// Sorting should happen here
}
Getting the index of a column
I am using the generic way to get the column name. If you are using Jquery, we can get the column index using this.
myColumn = $(parent).prevAll().length
where the parent should be th of the specific column.
Applying an ascending or descending sort
// ascending
myTable.order([myColumn, "asc"]).draw()
So, if we put the code in one section, it looks like this.
table = myTable // This is datatable you initialized
$(".arrow-sort-ascending").bind("click", {table: table}, function(event){
parent = $(event.target).parent()
myIndex = $(parent).prevAll().length;
table.order([myIndex, "asc"]).draw()
}
This way, whenever we click on the cut icon, it will sort the column with the click.
source to share