在模态中创建数据表

Question

I have tried to display a table as a datatable. But the code for displaying that is in another PHP file, so that it is not displayed as datatable instead as a normal table. I have included all the script files also.

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

Using the below given code the table is called for displaying.

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

      }

Answer 1

You can use these functions to first create and then update the datatable where needed.

1) Make sure all of the tables with a specific class are DataTable by default.

$(document).ready(function(e) {
   $('.dataTable').DataTable();
});

2) Update the table after you've submitted your Ajax.

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