Adding New API method
Adding New API method
Hi Allan,
I have developed a datagrid using DataTables plugin where i am trying to add a new API method to the grid. The method is not firing on the grid, but working fine on normal table. I am not quite sure as how to add a custom API method using the DataTable plugin.
On the DataTables grid, and i have a checkbox at each row and checkboxes on few columns. So i want to show/hide an tick mark image next to data in each td when i check the checkbox at start of the row and column headers. And the tick mark should hide when i uncheck.
HTML Demo - (http://jsfiddle.net/pixelfx/qLDan/11/)
This is what i need, when i select 1 and A, change should happen only to A1. Keeping 1 selected when i select, 1 and B=A2, 1 and C=A3, 1 and D=A4. The method is working fine on normal html table but when i add to DataTables script, this method is not firing.
Here is the DataGrid demo of what i have developed along with the new functionality
http://jsfiddle.net/pixelfx/MpzXU/10/
[code]
$(document).ready(function(){
var headers = $('#example th');
$(':checkbox', '#example').change(function(e){
var isChecked = $(this).is(':checked');
if( $(this).closest('thead').length ){ //columns checkboxes
//getting the column index
var i = headers.index( $(this).parent() );
$('tbody tr', '#example').each(function(){
var isLineChecked = $(':checkbox:checked', this).length;
if( isChecked && isLineChecked ){
$(this).find('td:eq('+i+')').addClass('selected');
} else {
$(this).find('td:eq('+i+')').removeClass('selected');
}
});
} else { //line checkbox
var columnsCheckboxes = $(':checkbox', headers);
$(this).parent().siblings(':gt(1)').each(function(i, td){
if( isChecked && columnsCheckboxes.eq(i).is(':checked') ){
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
}
});
});
[/code]
Any inputs would be really helpful.
I have developed a datagrid using DataTables plugin where i am trying to add a new API method to the grid. The method is not firing on the grid, but working fine on normal table. I am not quite sure as how to add a custom API method using the DataTable plugin.
On the DataTables grid, and i have a checkbox at each row and checkboxes on few columns. So i want to show/hide an tick mark image next to data in each td when i check the checkbox at start of the row and column headers. And the tick mark should hide when i uncheck.
HTML Demo - (http://jsfiddle.net/pixelfx/qLDan/11/)
This is what i need, when i select 1 and A, change should happen only to A1. Keeping 1 selected when i select, 1 and B=A2, 1 and C=A3, 1 and D=A4. The method is working fine on normal html table but when i add to DataTables script, this method is not firing.
Here is the DataGrid demo of what i have developed along with the new functionality
http://jsfiddle.net/pixelfx/MpzXU/10/
[code]
$(document).ready(function(){
var headers = $('#example th');
$(':checkbox', '#example').change(function(e){
var isChecked = $(this).is(':checked');
if( $(this).closest('thead').length ){ //columns checkboxes
//getting the column index
var i = headers.index( $(this).parent() );
$('tbody tr', '#example').each(function(){
var isLineChecked = $(':checkbox:checked', this).length;
if( isChecked && isLineChecked ){
$(this).find('td:eq('+i+')').addClass('selected');
} else {
$(this).find('td:eq('+i+')').removeClass('selected');
}
});
} else { //line checkbox
var columnsCheckboxes = $(':checkbox', headers);
$(this).parent().siblings(':gt(1)').each(function(i, td){
if( isChecked && columnsCheckboxes.eq(i).is(':checked') ){
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
}
});
});
[/code]
Any inputs would be really helpful.
This discussion has been closed.
Replies
API method can be added through the plug-in structure for API functions: http://datatables.net/development/api . There are a number of examples of plug-ins which have been created here: http://datatables.net/plug-ins/api .
However, looking at your code I don't think it's an API method that you want to add to DataTables - just some functionality on top of it. So first thing I would suggest is using a live event rather than the current change() - http://datatables.net/faqs#events . The next is that you have FixedHeader enabled, but the selector I don't think will match the checkboxes in it (since they aren't in the #example table). I'd suggest changing the selector to 'div.dataTables_wrapper input[type=checkbox]:selected' or something like that.
Allan
Firstly, thanks a lot for DataTables plugin which was useful for my project which am working. I have searched over internet for this plugin where i need freeze columns & headers with features like sorting, pagination,filtering, searching. I really love this plugin. Thanks for sharing.
Thanks for your reply. I was wrong, this is not a API just new functionality which am trying to add onto the datagrid.
I am just a beginner in jquery/js, can you please help me in integrating this script to the datagrid.
http://jsfiddle.net/pixelfx/MpzXU/10/
Thanks,
Ravi.