Solved

JQuery DataTable Basic

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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…

751 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