如何通过ajax更改“用户的活动/非活动状态”？

Question

我通过codeigniter中的AJAX基于2个参数在数据表中显示用户列表。我想更改数据库中用户的状态并显示在表中。我有3个状态，0->无效，1->有效，-1->左。我想更改状态并显示在数据表中，而无需重新加载页面。

我尝试更改状态，但是状态仅更改一次。在第一次AJAX调用之后，当我再次更改状态时，没有任何更改。

//view

    <script>
    $(document).ready(function()
    {
    $('#academicTable_wrapper').hide();
    $('#studentTable').DataTable();
    showStudents();
    function showStudents()
    {
        $('#submitBtn').on('click',function(){
            var courseId = $('#courseId').val();
      var classId = $('#classId').val();
      $.ajax({
                type  : 'POST',
                url   : "<?php echo base_url();?>Student/getStudentsList",
                // async : true,
                data  : {courseId:courseId,classId:classId},
                dataType : 'json',
                success : function(data){
                  //alert(data);
                    var html = '';
                    var i;

                    for(i=0; i<data.length; i++){
                       var studentId = data[i].studentId;

                        if(data[i].status == 1)
                          var status = "Approved";
                        else if(data[i].status == 0)
                          var status = "Pending";
                        else
                          var status = "Left";
                        html += '<tr>'+
                                '<td>'+data[i].studentId+'</td>'+
                                '<td>'+data[i].studentName+'</td>'+
                                '<td>'+data[i].studentPhoneNum+'</td>'+
                                '<td>'+data[i].created_on+'</td>'+
                                '<td id="changeStatus">'+status+'</td>'+
                                '<td>'+

                      '<a href="'+'viewStudentProfile/'+studentId+'/'+classId+'/'+courseId+'/'+data[i].programId+'" class="btn btn-secondary btn-sm text-white">View</a>'+
                      ' '+
                      '<a id="activateBtn" data-id="'+data[i].id+'" data-status="'+data[i].status+'" class="btn btn-primary btn-sm text-white">Activate/Deactivate</a>'+
                      ' '+
                      '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete">Delete</a>'+
                                '</td>'+
                                '</tr>';
                    }
                    $('#studentTable').DataTable().destroy();
                    $('#showData').html(html);
                    $('#studentTable').DataTable();
                    $('#academicTable_wrapper').show();
                }

            });        
      });
    }



    $(document).on('click','#activateBtn',function()
    {
      var id = $(this).data('id');
      var status = $(this).data('status');
      $.ajax({

        method: 'POST',
        url: "<?php echo base_url();?>Student/approveStudent",
        data:{id:id,status:status},
        success : function(data)
        {
          alert(data);
          $('#changeStatus').text('');
          if(data == 0)
          {
            showStudents();
            $('#changeStatus').html('Inactive');  
          }
          else{
            showStudents();
            $('#changeStatus').html('Approv');  
          }
        },
        error:function(data)
        {
          console.log(data);
        }
      },1000);

    });

  });
</script>


    //controller

    function approveStudent()
    {
        $id = $this->input->post('id');
        $status = $this->input->post('status');
        $col = 'id';
        $query = $this->Admin_model->activate($col,$id,$status,$this->studentDetail);

        if($query){

            $result = $this->Admin_model->getData($col,$id,$this->studentDetail);
        } 

         $status   = 1; 
         if ($result[0]->status == 0)
         {
            $status = 0;
         } 
         echo $status;

       }

我希望每当我单击activateBtn时状态都会在数据库和数据表中更改。