Geek Answers Handbook

JQuery dataTables and row selection

I try to get jQuery dataTable to behave so that the user can select a row and then click a button (located elsewhere on the page but not on the table or in it) and a JS warning appears.

Here is my data table:

$("#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 a user selects a row in dataTable and then clicks a button, I need the following function:

 function bam() { alert("Deleting the selected row"); // Delete the selected row in the dataTable }

Finally, the HTML table that jQuery dataTable is trying 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 could not get anything to work. Can anyone determine which configurations I need to add (to dataTable and / or otherwise)? Thanks in advance!

+4
source share
4 answers

You use jQuery, you can also stay on the go.

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

On the side of the note, the identifier should be unique, but I'm sure you know it, so make sure you are not trying to reuse the same identifier again and again.

Also, if this element is added to the DOM after executing .ready() , you will need to bind the event handler to the static parent element so that it can delegate the click event correctly.

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

I will leave it in place, I do not like to delete whole parts of my answer, since you never know who might find it useful in the future

First, we need to create a variable that is accessible to all areas of all functions. Thus, we can refer to the variable to get the element that we want to delete.

We must put this variable outside of the document ready function

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

Now that we have prepared the 'global scope' variable, we can change it and access it at any time.

 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 who can find this useful

Selector :eq() provided by jQuery cannot use .querySelectorAll() to get a decent performance increase. Because of this, and for now, you should always use .eq() over :eq() .

+3
source

Please check that your:

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

In this expression, no:

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

If your function is in $(document).ready() , it means that it is available only in this area, in particular function() .

Move the code above or below the $(document).ready() statement, and your onclick event handler in your button can find it and call it .

To remove a specific item from the data table, try using 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] ); } ); });
+2
source

I had a similar problem with a table with dynamic data loading. Each time I added content, the old nodes disappeared, losing related events. I solved the problem calling the function after loading the data:

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

It is important to add the "bRetrieve" parameter because the table has been pre-initialized.

In addition, I improved keyboard event management functionality 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 string chain should replace the comment line of the first example. Now the table can be used from the keyboard by selecting using the intro or space bar. Do not forget to add tabindex = 0 to the elements inserted in the table, so we can navigate using the tab key.

0
source

More articles:


All Articles