CODEWITHSUNDEEP
jquery
David Brierton
David Brierton

Reputation: 7397

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

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 {
      }
    });

Upvotes: 0

Views: 2515

Answers (2)

Ángela
Ángela

Reputation: 1425

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.

Upvotes: 2

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10967

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");
})

Upvotes: 1

Related Questions