Solved

JQuery DataTable Basic

Posted on 2015-02-12
4
38 Views
Last Modified: 2015-08-15
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
Comment
Question by:Errol Farro
  • 2
  • 2
4 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40605390
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
 

Author Comment

by:Errol Farro
ID: 40605912
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
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 40606497
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
 

Author Comment

by:Errol Farro
ID: 40606533
PERFECT !!!!! Exactly what I have been looking for. Thankssssssss a millionnnnnnnnnnnn  !!!!!!!!
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question