Solved

JQuery DataTable Basic

Posted on 2015-02-12
4
31 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now