jQuery dataTables and selecting a row

Question

I am trying to get a jQuery dataTable to behave in such a way that a user can select a row and then click a button (located elsewhere on the page, but not on the table or in it) and have a JS alert pop up.

Here is my dataTable:

$("#my-datatable").dataTable( {
    "bProcessing" : true,
    // Commenting out next line
    //"sDom" : 't',
    "sAjaxSource" : "some/url/on/my/server",
    "sAjaxDataProp" : "",
    "bDestroy" : true,
    "fnServerData" : function(sSource, aoData, fnCallback) {
        aoData.push({
            "name" : "asking",
            "value" : "yes"
        });

        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },

    "aoColumns" : [
        {
            "mDataProp" : "name"
        },
        {
            "mDataProp" : "expr"
        },
        {
            "mDataProp" : "seq"
        }
    ]
});

Here is my button:

<div id="bam-btn-div">
    <input type="button" id="bam-btn" value="BAM!" onclick="bam();"/>
</div>

When the user selects a row in the dataTable, and then clicks the button, I want the following function called:

function bam() {
    alert("Deleting the selected row");

    // Delete the selected row in the dataTable
}

Finally, the HTML table that the jQuery dataTable is attempting to populate:

<div id="datatable-div">
    <table id="optconfig-datatable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Expression</th>
                <th>Sequence</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

I tried to follow the example here but couldn't get anything to work. Can anybody spot what configurations I need to add (to the dataTable and/or otherwise)? Thanks in advance!

Ohgodwhy · Accepted Answer · 2012-10-17 02:44:27Z

3

You are using jQuery, you might as well stay on track.

$('#bam-btn').on('click', function(){
    alert("BAM!");
});

On a side note, ID's must be unique, but I'm sure you know that, so make sure you're not trying to re-use the same ID over and over.

Moreover, if this element is added into the DOM after .ready() execution, you'll need to attach the event handler to a static parent element so it may delegate the click event properly.

$(document).on('click', '#bam-btn', function(){
    alert("BAM");
});

I'll leave the above in place, I don't like to delete entire portions of my answer as you never know who may find it helpful in the future

First, we need to create a variable that's available to all scopes of all functions. This way, we can reference the variable to get a hold of the element we want to remove.

We should place this variable outside of the document ready function

var theRow = '';
$(document).ready(function(){ 
    //existing code here
});

Now that we have a 'global scope' variable prepared, we can modify it and access it anytime.

var theRow = '';
$(document).ready(function(){ 
    $('tr').click(function(){
        //we need to store a unique piece of information about this row.
        //Without much to go on, I'm going to rely on the index.
        theRow = $(this).index();
    });

    $('#bam-btn').click(function(){
       $('tr').eq(theRow).remove(); 
    });
});

And here is your decent working jsFiddle as an example

For future users, and anyone else whom may find this useful

The :eq() selector provided by jQuery cannot leverage .querySelectorAll() to gain a decently large performance boost. Because of this, and for the time being, you should always use .eq() over :eq().

edited Oct 17, 2012 at 2:44

answered Oct 17, 2012 at 2:32

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IAmYourFaja Over a year ago

(+1) - very sorry please see my edited Javascript - I actually want to delete the selected row, not just display the alert. This was my oversight.

Ohgodwhy Over a year ago

Sure, no problem. We just need to delegate a click function to the rows. Once we do, we can then properly remove the row from the DOM. Can you show me the generated markup for a single row? I'll be happy to help then.

Ohgodwhy Over a year ago

@pnongrata Please see the update to my answer with the attached jsFiddle. This should work out of the box, however; you may have to make some changes to the selectors I've chosen as they're ambiguous.

IAmYourFaja Over a year ago

Just added the HTML table - hope that's what you were looking for, and thanks again for the help so far.

score 2 · Accepted Answer · 2012-10-17 02:41:48Z

2

Please check that your:

function bam() {
    alert("BAM!");
}

Is not in this statement:

$(document).ready(function() {
    // STATEMENT
});

If your function is in the $(document).ready(), that means it's available only in that scope, in that particular function().

Move your code above or below the $(document).ready() statement, and your onclick event handler in your button will be able to find it and invoke it.

To delete a specific element from your data-table, try with this JavaScript:

$(document).ready(function() {
    var oTable = $("#my-datatable").dataTable( {
        "bProcessing" : true,
        // Commenting out next line
        //"sDom" : 't',
        "sAjaxSource" : "some/url/on/my/server",
        "sAjaxDataProp" : "",
        "bDestroy" : true,
        "fnServerData" : function(sSource, aoData, fnCallback) {
            aoData.push({
                "name" : "asking",
                "value" : "yes"
            });

            request = $.ajax({
                "dataType" : "json",
                "type" : "GET",
                "url" : sSource,
                "data" : aoData,
                "success" : fnCallback
            });
        },

        "aoColumns" : [
            {
                "mDataProp" : "name"
            },
            {
                "mDataProp" : "expr"
            },
            {
                "mDataProp" : "seq"
            }
        ]
    });$("#my-datatable").dataTable( {
        "bProcessing" : true,
        // Commenting out next line
        //"sDom" : 't',
        "sAjaxSource" : "some/url/on/my/server",
        "sAjaxDataProp" : "",
        "bDestroy" : true,
        "fnServerData" : function(sSource, aoData, fnCallback) {
            aoData.push({
                "name" : "asking",
                "value" : "yes"
            });

            request = $.ajax({
                "dataType" : "json",
                "type" : "GET",
                "url" : sSource,
                "data" : aoData,
                "success" : fnCallback
            });
        },

        "aoColumns" : [
            {
                "mDataProp" : "name"
            },
            {
                "mDataProp" : "expr"
            },
            {
                "mDataProp" : "seq"
            }
        ]
    });

    $('button#bam-btn').on('click', function() {
        var anSelected = fnGetSelected( oTable );
        oTable.fnDeleteRow( anSelected[0] );
    } );
});

edited Oct 17, 2012 at 2:41

answered Oct 17, 2012 at 2:29

user1386320

4 Comments

IAmYourFaja Over a year ago

(+1) - very sorry please see my edited Javascript - I actually want to delete the selected row, not just display the alert. This was my oversight.

user1386320 Over a year ago

@pnongrata I've updated my answer. Please check if that works for you, and accept my answer if it solves your problem :)

Ohgodwhy Over a year ago

I think that your method is probably better. I'm not leveraging the dataTables functions to perform my actions. This may or may not have performance implications, but I always try to stay within the API I'm using as much as possible. +1, and if this works for OP, he should accept it over mine.

user1386320 Over a year ago

:) I've used dataTables 2-3 years ago, and I remember when I was dealing with similar issues :) if you ask me, plugin has disadvantages when it comes to accessing some properties and methods related to the plugin, as you can see from my delete solution :) KUTGW!

opalenzuela · Accepted Answer · 2013-06-20 08:04:16Z

I had a similar problem with a table with dynamic data load. Every time I was adding contents, the old nodes disappear, losing the events linked. I solved the problem invoking a function after the data load:

    function insertevents(table_id){
        var oTable = jQuery('#'+tableid).dataTable( {"bRetrieve": true });
        oTable.$('tr').click(function(){
            jQuery(this).toggleClass('row_selected');
        } );
        // Extra code here
    }

It's important to add the "bRetrieve" parameter because the table was previously initialized.

Also, I've improved the functionality controlling keyboard events for accessibility:

        oTable.$('tr').keyup( function(event) {
            if (event.which == 13 || event.which == 32) {
                event.preventDefault();
                jQuery(this).toggleClass('row_selected');
            }       
        } ); 
        oTable.$('tr').keydown( function(event) {
            if (event.which == 13 || event.which == 32) {
                event.preventDefault(); // Desactivamos este efecto
            }
        });

This bunch of lines should replace the comment line of the first example. Now the table can be used from the keyboard, selecting with intro or space key. Remember to add a tabindex=0 to the elements inserted in the table, so we can navigate with the tab key.

patz · Accepted Answer · 2013-06-21 20:02:16Z

0

http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html

This is similar to what you want.

answered Jun 21, 2013 at 20:02

patz

1,3165 gold badges25 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery dataTables and selecting a row

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related