jQuery DataTables know if a table row has been selected and alert on button press if not

Question

How do you check the jQuery DataTables if a row has been selected? I am trying to have a completed button that submits to the database when pressed only if a row from the DataTable has been selected. If the row has not been selected and the button is pressed I want it to alert the user and tell them they must select a row to complete.

What I have tried:

$(document).ready(function () {

    $("#CompleteIt").click(function () {
        var table = $('#processing').DataTable();
        $('#processing tbody').on( 'click', 'tr', function () {
            var rowdata = table.row( this ).data();
            console.log(rowdata);
      if (!rowdata) {
          console.log(rowdata.id);
          alert("Please choose a batch to be completed.");
          return false;
      } else {
      }
    });

Ángela · Accepted Answer · 2015-10-24 15:44:18Z

You can also use a hidden field to store the selected row. This might be useful if you need to send the row clicked to your server.

In the HTML add:

<input id="selectedRow" type="hidden"/>

In the script, whenever a row is clicked, store the index of the clicked row. If a row is clicked again, remove the value.

$('#processing tbody').on( 'click', 'tr', function () {
    var newIndex = table.row(this).index();
    var selectedIndex = $('#selectedRow').val();

    if (selectedIndex == newIndex) {
        $('#selectedRow').val('');
    }
    else {
        $('#selectedRow').val(newIndex);
    }
});

Then, on the handler for the button, check whether this hidden input has a value:

$('#CompleteIt').click(function(){
    var rowIndex = $('#selectedRow').val();

    if (rowIndex){
        console.log("Row selected: " + rowIndex);
    } else {
        console.log("No row selected!");
        return false;
    }
});

Example adapted from docs: JSFiddle

Edit: How to use data at first item in the row instead of index?

Use row(this).data() (docs here) instead of row(this).index(). Depending on how you populated your fields the data you get might be an object or an array. If you DOM sourced data, data() will return an array, so to access the first item you need row(this).data()[0]. If you used an object (like a json from an ajax source), you will get an object instead, so you'd need to access the property you need, like row(this).data().id. Check out the updated fiddle.

Rosmarine Popcorn · Accepted Answer · 2015-10-24 14:13:10Z

1

You have to store the selected row on a global variable, and check for it on your submit button.

        var selectedRow = null;
var table = $('#processing').DataTable();
$('#processing tbody').on( 'click', 'tr', function (e) {
    e.stoppropagation();
    selectedRow = table.row( this ).data();
    return false;
})

$(body).click(function(){
    selectedRow = null;
});

$("#CompleteIt").click(function () {
    if(selectedRow){
        //process the request
        return true;
    }
    alert("No row is slected");
})

edited Oct 24, 2015 at 14:13

answered Oct 24, 2015 at 13:42

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

3 Comments

Rosmarine Popcorn Over a year ago

@DavidBrierton I edited my answer, now Table is an object.

Rosmarine Popcorn Over a year ago

@DavidBrierton I edited the code, now when you click on that row it prevents all over click events to fire, but if you click anywhere except the table row, the variable is cleared.

Ángela Over a year ago

You could also add some class to the selected row to indicate it is selected (and remove it when the row is clicked again). There's an example in the docs that might be useful.

Collectives™ on Stack Overflow

jQuery DataTables know if a table row has been selected and alert on button press if not

2 Answers 2

Edit: How to use data at first item in the row instead of index?

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit: How to use data at first item in the row instead of index?

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related