我在使用datatables.net时遇到了我的DataTables问题

Question

Im Having a problem with my DataTables im using datatables.net the problem im having right now is the "Showing # to # of # entries" is not working and not counting the data that it is showing in the tables and the pagination is not working and the search bar is not functioning the "Show 10/100 entries" is not working.

PS: I put quotation on them because i dont know what do you call them.

This is my html and ajax code

<div class="card card-dark">
    <h6 class="card-header">User Status Details</h6>
    <div class="card-body">
     <span id="message"></span>
     <div class="table-responsive">
     <table class="table table-striped" id="table-1">
    </div>
   </table>
     <script>
     $(document).ready(function(){

      load_user_data();

      function load_user_data()
      {
       var action = 'fetch';
       $.ajax({
        url:'action',
        method:'POST',
        data:{action:action},
        success:function(data)
        {
         $('#table-1').html(data);
        }
       });
      }

      $(document).on('click', '.action', function(){
       var id = $(this).data('id');
       var user_status = $(this).data('user_status');
       var action = 'change_status';
       $('#message').html('');
       if(confirm("Change User Status"))
       {
        $.ajax({
         url:'action',
         method:'POST',
         data:{id:id, user_status:user_status, action:action},
         success:function(data)
         {
          if(data != '')
          {
           load_user_data();
           $('#message').html(data);
          }
         }
        });
       }
       else
       {
        return false;
       }
      });

     });
     </script>
    </div>
   </div>

my action code

if(isset($_POST['action']))
{

    if($_POST["action"] == 'fetch')
    {
        $output = '';
        $query = "SELECT * FROM users WHERE user_type = 'user' ORDER BY username ASC";
        $statement = $connect->prepare($query);
        $statement->execute();
        $result = $statement->fetchAll();
        $output .= '
            <table class="table table-striped" id="table-1">
            <tr>
                <td>ID #</td>
                <td>Username</td>
                <td>Status</td>
                <td>Action</td>
            </tr>
        ';
        foreach($result as $row)
        {
            $status = '';
            if($row["user_status"] == 'Active')
            {
                $status = '<span class="badge badge-primary">Active</span>';
            }
            else
            {
                $status = '<span class="badge badge-primary">Inactive</span>';
            }
            $output .= '
            <tr>
                <td>'.$row['id'].'</td>
                <td>'.$row['username'].'</td>
                <td>'.$status.'</td>
                <td><button type="button" name="action" class="btn btn-info btn-xs action" data-id="'.$row["id"].'" data-user_status="'.$row["user_status"].'">Action</button></td>
            </tr>
            ';
        }
        $output .= '</table>';
        echo $output;
    }

    if($_POST["action"] == 'change_status')
    {
        $status = '';
        if($_POST['user_status'] == 'Active')
        {
            $status = 'Inactive';
        }
        else
        {
            $status = 'Active';
        }
        $query = '
        UPDATE users SET user_status = :user_status WHERE id = :id
        ';
        $statement = $connect->prepare($query);
        $statement->execute(
            array(
                ':user_status'          => $status,
                ':id'              => $_POST['id']
            )
        );
        $result = $statement->fetchAll();
        if(isset($result))
        {
            echo '<div class="alert alert-info">User status set to <strong>'.$status.'</strong><div>';
        }
    }
}

?>

I cant figure out whats missing on my code but the ajax code is working fine and the data is showing in my DataTable

Answer 1

HTML:

<div class="card card-dark">
    <h6 class="card-header">User Status Details</h6>

    <div class="card-body">
        <span id="message"></span>

            <div id="tableDiv"></div>

    </div>

</div>

JS:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

      load_user_data();
 // initialize DT 
 var table = $('#table-1').DataTable();

 $(document).on('click', '.action', function(){
       var id = $(this).data('id');
       var user_status = $(this).data('user_status');
       var action = 'change_status';
       $('#message').html('');
       if(confirm("Change User Status"))
       {
        $.ajax({
         url:'action',
         method:'POST',
         data:{id:id, user_status:user_status, action:action},
         success:function(data)
         {
          if(data != '')
          {
           load_user_data();
           $('#message').html(data);
           // re-load data and re-initialize DT
           $('#tableDiv').html(data); 
           table.rows().invalidate().draw(); // or table.rows().invalidate();
          }
         }
        });
       }
       else
       {
        return false;
       }
 });
});

function load_user_data()
 {
       var action = 'fetch';
 $.ajax({
        url:'action',
        method:'POST',
        data:{action:action},
        success:function(data)
        {
         $('#tableDiv').html(data);
        }
 });
 }
</script>

PHP:

if(isset($_POST['action']))
{

    if($_POST["action"] == 'fetch')
    {
        $output = '';
        $query = "SELECT * FROM users WHERE user_type = 'user' ORDER BY username ASC";
        $statement = $connect->prepare($query);
        $statement->execute();
        $result = $statement->fetchAll();
        $output .= '
            <table class="table table-striped table-responsive" id="table-1">
            <thead>
            <tr>
                <th>ID #</th>
                <th>Username</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
            </thead>
        ';
$output .= '<tbody>';
        foreach($result as $row)
        {
            $status = '';
            if($row["user_status"] == 'Active')
            {
                $status = '<span class="badge badge-primary">Active</span>';
            }
            else
            {
                $status = '<span class="badge badge-primary">Inactive</span>';
            }
            $output .= '
            <tr>
                <td>'.$row['id'].'</td>
                <td>'.$row['username'].'</td>
                <td>'.$status.'</td>
                <td><button type="button" name="action" class="btn btn-info btn-xs action" data-id="'.$row["id"].'" data-user_status="'.$row["user_status"].'">Action</button></td>
            </tr>
            ';
        }
$output .= '</tbody>';
        $output .= '</table>';
        echo $output;
    }

    if($_POST["action"] == 'change_status')
    {
        $status = '';
        if($_POST['user_status'] == 'Active')
        {
            $status = 'Inactive';
        }
        else
        {
            $status = 'Active';
        }
        $query = '
        UPDATE users SET user_status = :user_status WHERE id = :id
        ';
        $statement = $connect->prepare($query);
        $statement->execute(
            array(
                ':user_status'          => $status,
                ':id'              => $_POST['id']
            )
        );
        $result = $statement->fetchAll();
        if(isset($result))
        {
            echo '<div class="alert alert-info">User status set to <strong>'.$status.'</strong><div>';
        }
    }
}

?>

Try this all, I hope it will work, because I can't check it by myself. From this moment look at console for an error. Show them if they are.