使用Jquery Ajax PHP实时显示数据表

Question

I just want to know how can i fetch the design of the datatables of my table. Because the filter and the pagination of the table is not working. Heres my code.

i have this plugin in my

  <link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
  <link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
  <link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">
  <link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
  <link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
  <link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">

  <script src="../assets/vendor/datatables/jquery.dataTables.min.js"></script>
  <script src="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.js"></script>
  <script src="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.js"></script>
  <script src="../assets/vendor/datatables-responsive/dataTables.responsive.js"></script>
  <script src="../assets/vendor/datatables-tabletools/dataTables.tableTools.js"></script>

display

<div id="table_data" >
</div>

script

    fetch_data();

 function fetch_data()
 {
  var action = "fetch";
  $.ajax({
   url:"table/serviceTypeTable.php",
   method:"POST",
   data:{action:action},
   success:function(data)
   {
    $('#table_data').html(data);
   }
  })
 }

query for fetch:

if(isset($_POST["action"]))
{
 if($_POST["action"] == "fetch")
 {
  $qry = mysql_query("select * from services_type")or die(mysql_error());
  $count = mysql_num_rows($qry);
  $output = '
    <table class="table table-hover dataTable table-striped width-full"  data-plugin="dataTable">
        <thead>
            <th>Services Types</th>
            <th>Action</th>
        </thead>
  ';
  while($row = mysql_fetch_array($qry))
  {
   $services_type_id = $row['services_type_id'];
   $output .= '
    <tbody>
    <tr>
        <td>'.$row['services_type_name'].'</td>
        <td style="text-align:center;">
            <a href="javascript:void(0);" onclick="editServiceType('.$services_type_id.')" data-toggle="modal" class="btn btn-success"><i class="fa fa-edit"></i></a>
        </td>
    </tr>
    </tbody>
   ';
  }
  $output .= '</table>';
  echo $output;
 }
}

my problem is the datatables design is not working. that's all thanks :)

Answer 1

I figured it out. I just put this script in query fetch at the button after the :)

<script>
   $("#table").dataTable({
   });
</script>