On sorting the rows by columns the function gets overridden with the default function

vaishnavkoka

before sorting
function works fine
after sorting
function gets overrriden
here is my code;

<script type="text/javascript">
$(document).ready(function() {
    $('#tablename').DataTable.ext.pager.numbers_length = 5;// For setting pagination with elipses(...)
    var table= $('#tablename').DataTable( {
     "initComplete": function( settings, json ) {
      updateServiceButtons();
    },
     "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
     "pagingType": "full_numbers",
     "processing": true,
     "serverSide": true,
     "ajax":"../tablename_ajax_d/serverSide.php",
     "columns": [
                        { "data": "mm_sno" },
                        { "data": "system_name" },
                        { "data": "ip_address" },
                        { "data": "service_name" },
                        { "data": "service_status" },
                        { "data": "date" },
                        { "data": null },
                        { "data": null }
                    ],      
    "columnDefs": [
                    {
                        "targets": -2,
                        "data": null,
                        "defaultContent": `<button id ="restart-service" class="btn btn-success" data-toggle='modal' data-target='#service-start-stop-modal'>Restart</button>`
                        
                      },
                    {
                        "targets": -1,
                        "data": null,
                        "defaultContent": `<button id ="stop-service" class="btn btn-danger" data-toggle='modal' data-target='#service-start-stop-modal'>Stop</button>`
                      }
                ],
    rowCallback: function(row, data, index){
        if(data.service_status=='running'){
        $(row).find('td:eq(2)').css('color', 'GREEN');
        }
        else if(data.service_status== 'failed'){
        $(row).find('td:eq(2)').css('color', 'red');
        }
    }
    } );

$('#tablename tbody').on( 'click', 'button', function () { 
  var data = table.row( $(this).parents('tr') ).data();
  var type = $(this).attr('id').includes('restart') ? 'restart' : 'stop';
  host_url = `url1`
  $.ajax({
    type: "GET",
    url: `url2`,
    success: function(result){
      try{
        var res = $.parseJSON(result);
        if(res){
          $(".modal-body").html(`Service ${data['service_name']} is successfully ${type}ed`);
        }else{
          $(".modal-body").html(`${res}`);
        }
      }
      catch(error){
        $(".modal-body").html("something went wrong");
      }
    }
  });
});
} );
function updateServiceButtons(){
    var rows = $("tbody").find("tr");
    const RUNNING_STATE = 'running';
    for(var i=0; i<rows.length; i++){
      var elem = $($("tbody").find("tr")[i]);
      if(elem.find(".service-status").text() == RUNNING_STATE){
        elem.find("#restart-service").attr("disabled","disabled");
        elem.find("#stop-service").removeAttr("disabled");
      }else{
        elem.find("#stop-service").attr("disabled","disabled");
        elem.find("#restart-service").removeAttr("disabled");
      }
    }
  }
</script>

Thanks
Koka

EDIT:Update code formatting use triple back ticks.

kthorngren

Please describe what you mean by the function gets overridden. What happens?

One problem I see is that your buttons are using the same id, for example <button id ="restart-service". Each id on a page is expected to be unique. Might not be an issue for you specific code but you probably should use class instead for restart and stop to keep within best practices.

Maybe you can provide a test case replicating the issue and describing how to recreate the problem.

Kevin

rf1234

Same question as Kevin to be honest. But I guess you mean this function:
function updateServiceButtons()

This function is only being executed on "initComplete". Hence it is not being executed after sorting. I would replace it with an event listener that executes your function after each draw of the table.

https://datatables.net/reference/event/draw

colin

Hi @vaishnavkoka ,

We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

vaishnavkoka

@kthorngren -well i thought of providing the test case but by that time i used draw method and it solved my problem but if you still need a test case i can provide you one,
@colin - if you need running test case please do let me know.

@rf1234 - hey thanks buddy your suggestion has solved my issue

Thanks
Koka

colin

No test case needed for this one, as all resolved, but please provide test cases in the future - we're all very busy, and many people comment on this forum while doing other jobs, so a test case that replicates the issue will ensure you'll get a quick and accurate response.

C