[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 48
  • Last Modified:

JQuery DataTable Basic

I started using Data Table yesterday and think it is very nice tool. I have managed to display data in DataTable using Coldfusion. Since I am new to JQUERY I need three more items to deliver a project using datatables Jquery 1. add an delete icon in a cell on each row. When the delete icon is pressed it should fire function deleteRow() which in turns invokes a Coldfusion program 2. add a "NEW BUTTON" next to "show-dropdown-entries" on top. Upon clicking it should invoke addNewRow() function which in turns calls a Coldfusion program 3) when a user "clicks" or "double-clicks" on a row it should trigger function updateRow() which in turn calls a Coldfusion program
0
Errol Farro
Asked:
Errol Farro
  • 2
  • 2
1 Solution
 
Rainer JeschorCommented:
Hi,
sorry, I have no knowledge on Coldfusion therefore I do not know how the generated HTML will look alike, but here some basic concepts for your question:

1. Delete row button
Just add a column where you place a delete icon (or button - then just change the selector to "button.btn-delete") and give it a class name like "img-delete"
var table = $('#example').DataTable();
 
$('#example tbody').on( 'click', 'img.img-delete', function () {
    // Place here your call to the delete function
    //  If you need a value from the row use selectors 
   // based on table.row( $(this).parents('tr') ).find(....)
   
    table
        .row( $(this).parents('tr') )
        .remove()
        .draw();
} );

Open in new window


2. New button
Will this example help?
http://www.datatables.net/examples/api/add_row.html

There you can see that the button is placed above and then calls the dataTables function for adding a row. That would then be the right place to call additionally your CF function

3. Click events on rows
The following will bind to the row click / double click events
$(document).ready(function() {
    $('#example').dataTable();
     
    $('#example tbody').on('click', 'tr', function () {
        var name = $('td', this).eq(0).text();
        alert( 'You clicked on '+name+'\'s row' );
    } );
    $('#example tbody').on('dblclick','tr', function () {
        var name = $('td', this).eq(0).text();
        alert( 'You double clicked on '+name+'\'s row' );
    } );
} );

Open in new window


HTH
Rainer
0
 
Errol FarroAuthor Commented:
Works very well - thanks you.

The only challenge I an having is that when I click on the delete button, "click on row" function is triggered. Apart from that, it is working like a charm. Exactly what I needed.
0
 
Rainer JeschorCommented:
Hi,
hard fight for nearly an hour but here we go with a static (in regards to table data) live sample:
http://jsfiddle.net/EE_RainerJ/enL7zph0/

HTH
Rainer
0
 
Errol FarroAuthor Commented:
PERFECT !!!!! Exactly what I have been looking for. Thankssssssss a millionnnnnnnnnnnn  !!!!!!!!
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now