Javascript 在modal中创建数据表

Javascript 在modal中创建数据表,javascript,php,html,ajax,datatables,Javascript,Php,Html,Ajax,Datatables,我尝试将表显示为datatable。但是用于显示的代码在另一个PHP文件中,因此它不显示为datatable,而显示为普通表。我还包括了所有的脚本文件 **activity_show.php** <link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"> <link href="vendors/datatables.net-buttons-bs/cs

我尝试将表显示为datatable。但是用于显示的代码在另一个PHP文件中,因此它不显示为datatable,而显示为普通表。我还包括了所有的脚本文件

**activity_show.php**

<link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">

    <link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<table id="datatable-buttons" class="table table-striped table-bordered dataTable " role="grid" 
aria-describedby="datatable-buttons_info" style="width: 948px;">
                      <thead>
 <th>id</th>
                          <th>Date </th>
                          <th>id2</th>
 </tr>
                      </thead>
                      <tbody>
<td>1</td>
                <td >2</td>
                <td>3</td>

            </tr>   
 </tbody>
                    </table>    
 <script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>

    <script src="vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
    <script src="vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
    <script src="vendors/jszip/dist/jszip.min.js"></script>
    <script src="vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="vendors/pdfmake/build/vfs_fonts.js"></script>
**activity\u show.php**
身份证件
日期
id2
1.
2.
3.
使用下面给定的代码调用该表进行显示

 **activity.php**

    <div class="row">
          <div id="userTable"></div>
          </div>
      <script type="text/javascript">
        $(document).ready(function(){
        showactivity();
    });
    function showactivity(){
        $.ajax({
          url: 'activity_show.php',
          type: 'POST',
          async: false,
          data:{
            show: 1
          },
          success: function(response){
            $('#userTable').html(response);
          }
        });

      }
**activity.php**
$(文档).ready(函数(){
showactivity();
});
函数showactivity(){
$.ajax({
url:“activity_show.php”,
键入:“POST”,
async:false,
数据:{
节目:1
},
成功:功能(响应){
$('#userTable').html(响应);
}
});
}

您可以使用这些函数首先创建数据表,然后根据需要更新数据表

1) 确保默认情况下具有特定类的所有表都是DataTable

$(document).ready(function(e) {
   $('.dataTable').DataTable();
});
2) 提交Ajax后更新表

$('.dataTable').change(function(e) {
   $('.dataTable').draw();
});

您可以使用这些函数首先创建数据表,然后根据需要更新数据表

1) 确保默认情况下具有特定类的所有表都是DataTable

$(document).ready(function(e) {
   $('.dataTable').DataTable();
});
2) 提交Ajax后更新表

$('.dataTable').change(function(e) {
   $('.dataTable').draw();
});

这些都包括些什么?!你永远不应该需要那么多的DT…@Aaronnohuan认识这里的Aaron同事。。。。这些是增强DT功能的扩展。在具有复杂交互性的表中,您完全可以拥有大量的数据。这些都包括些什么?!你永远不应该需要那么多的DT…@Aaronnohuan认识这里的Aaron同事。。。。这些是增强DT功能的扩展。在具有复杂交互性的表中,您完全可以拥有大量的数据。