Solved

JQuery DataTable Basic

Posted on 2015-02-12
4
40 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

635 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