У меня проблема с моими DataTables при использовании datatables.net

Question

Im У меня проблема с моими DataTables. Я использую datatables.net. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что «Отображение # в # из # записей» не работает и не считает данные, которые отображаются в таблицах и разбивке на страницы.не работает, и панель поиска не работает, «Показать записи 10/100» не работает.

PS: я поставил на них цитату, потому что я не знаю, как вы их называете.

Это мой код HTML и AJAX

<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>

мой код действия

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>';
        }
    }
}

?>

Я не могу понять, чего не хватает в моем кодено код ajax работает нормально, и данные отображаются в моей 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>';
        }
    }
}

?>

Попробуйте все это, я надеюсь, что это сработает, потому что я не могу проверить это самостоятельно.С этого момента посмотрите на консоль на наличие ошибки.Покажите им, если они есть.