Selecting a single check box in a jquery datatable - Jquery ajax

HotdotCyber
July 30, 2020
100 views
0 votes
2 Answers

I have a datatable with some json data. I have added a checkbox in every row but the problem I want to be selecting a single row at a time. i.e when I click on a check box on one row the other check boxes not to be selected. i.e to behave like a radio button.Where am I going wrong with my code.
table

<div>
    <h1>Accounts Table</h1>
    <table id="employeesTable" class="display">
       <!-- Header Table -->
       <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </thead>
        <!-- Footer Table -->
        <tfoot>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </tfoot>
    </table>
</div>

Jquery datatable

$(document).ready( function () {
     var table = $('#employeesTable').DataTable({
            "sAjaxSource": "/account/list",
            "sAjaxDataProp": "",
            "order": [[ 0, "asc" ]],
            "aoColumns": [
                  { "mData": "id"},
                  { "mData": "account_type" },
                  { "mData": "amount" },
                  { "mData": "date" },
                  { "mData": "description" },
                  { "mData": null,
                   className: "center",
                defaultContent:'<input type="checkbox" name="name1"/>' }
            ]
     }

)

     $('input[name="name1"]').on('change', function() {
          var checkedValue = $(this).prop('checked');
            // uncheck other checkboxes (checkboxes on the same row)
            $(this).closest('tr').find('input[name=""]').each(function(){
               $(this).prop('checked',false);
            });
            $(this).prop("checked",checkedValue);
    
        });

Answers

Your description is little unclear, but if this is what you need?
Your input:

 $(this).closest('tr').find('input[name=""]')

is not finding anything or maybe itself. closest is finding ONLY ancestors.

HTML markup goes: table > thead OR tfoot > tr > input
you got stuck at tr and ignored thead and tfoot you need to find witch of those is it and find inputs inside.

$('input[name="name1"]').on('change', function() {
  var section = $(this).parents("tr").parent().get(0).nodeName
  console.clear();
  console.log(section);
  if (section === "THEAD") {
    $("tfoot * input[type='checkbox']").each(function() {
      $(this).prop('checked', false);
    });
  } else if (section === "TFOOT") {
    $("thead * input[type='checkbox']").each(function() {
      $(this).prop('checked', false);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Accounts Table</h1>
  <table id="employeesTable" class="display">
    <!-- Header Table -->
    <thead>
      <tr>
        <th>Id <input type="checkbox" name="name1" /></th>
        <th>Name <input type="checkbox" name="name1" /></th>
        <th>Amount <input type="checkbox" name="name1" /></th>
        <th>Date <input type="checkbox" name="name1" /></th>
        <th>Description <input type="checkbox" name="name1" /></th>
        <th>Active <input type="checkbox" name="name1" /></th>
      </tr>
    </thead>
    <!-- Footer Table -->
    <tfoot>
      <tr>
        <th>Id <input type="checkbox" name="name1" /></th>
        <th>Name <input type="checkbox" name="name1" /></th>
        <th>Amount <input type="checkbox" name="name1" /></th>
        <th>Date <input type="checkbox" name="name1" /></th>
        <th>Description <input type="checkbox" name="name1" /></th>
        <th>Active <input type="checkbox" name="name1" /></th>
      </tr>
    </tfoot>
  </table>
</div>

You can edit properties values by loop only the checked checkboxes:

$('input[name="name1"]:checked').each(function(){
   $(this).prop('checked',false);
});

And when getting table values from ajaxcall, Include onchange of the element in initComplete attribute of datatable,.. like below (because datatable checkbox HTML element will accessible once fully loaded from ajax, untill it won’t accessible. So onchange for checkbox is not applied here…)

"initComplete": function( settings, json ) {
   $('#employeesTable tbody input[name="name1"]').on('change', function() {
var checkedValue = $(this).prop('checked');console.log(checkedValue);
  // uncheck other checkboxes (checkboxes on the same row)
  $('input[name="name1"]:checked').each(function(){
     $(this).prop('checked',false);
  });
  $(this).prop("checked",checkedValue); });  },

$(document).ready( function () {
  var table = $('#employeesTable').DataTable({
     "aaData":[
      {

        "id": "1",
        "description": "Tiger Nixon",
        "account_type": "System Architect",
        "amount": "$320,800",
        "date": "2011/04/25",
         "name": "Tiger Nixon"
      },
      {

        "id": "2",
        "name": "Garrett Winters",
        "description": "Garrett Winters",
        "account_type": "Accountant",
        "amount": "$170,750",
        "date": "2011/07/25"
      }],
    //"sAjaxSource": "http://localhost/test.php",
      "sAjaxDataProp": "",
      "order": [[ 0, "asc" ]],
"initComplete": function( settings, json ) {
   $('#employeesTable tbody input[name="name1"]').on('change', function() {
    var checkedValue = $(this).prop('checked');//console.log(checkedValue);
      // uncheck other checkboxes (checkboxes on the same row)
      $('input[name="name1"]:checked').each(function(){
         $(this).prop('checked',false);
      });
      $(this).prop("checked",checkedValue);

  });
  },
      "aoColumns": [
      { "mData": "sel",
             className: "center",
          defaultContent:'<input type="checkbox" name="name1"/>' 
},
            { "mData": "id"},
            { "mData": "name" },
             { "mData": "description" },
            { "mData": "account_type" },
            { "mData": "amount" },
            { "mData": "date" },                  
      ]
});


  $('#employeesTable tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
  } );
});

<script src="https://code.jquery.com/jquery-3.5.1.js
"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<div>
    <!--<h1>Accounts Table</h1>-->
    <table id="employeesTable" class="display">
       <!-- Header Table -->
       <thead>
            <tr>
            <th></th>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </thead>
        <!-- Footer Table -->
        <tfoot>
            <tr>
            <th></th>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </tfoot>
    </table>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Selecting a single check box in a jquery datatable – Jquery ajax

Answers