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

时间:2017-09-17 04:17:08

标签: php jquery ajax

我只想知道如何获取表格数据表的设计。因为过滤器和表的分页不起作用。这是我的代码。

我的

中有这个插件
  <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>

显示

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

脚本

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

查询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;
 }
}

我的问题是数据表设计不起作用。这一切都归功于:)

1 个答案:

答案 0 :(得分:1)

我明白了。我只是把这个脚本放在查询后获取按钮  :)

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