为什么数据表cdn无法在从ajax生成的表上工作?

时间:2018-02-03 11:38:33

标签: javascript php jquery ajax datatables

数据表cdn无法使用我使用ajax从另一个页面调用的表。生成了新表,但它没有显示表中数据表的其他功能,只显示页面上的表。

我创建了一个带有按钮的页面,该按钮调用一个通过ajax刷新表的函数。我将cdn datatable链接和代码放在另一个页面上,直接打开时工作正常,但是当从ajax调用它时,它没有显示数据表cdn函数。而是显示整个表格。



$(function() {
	$('#populate').click(function() {
		$.ajax
		  ({
			  type: "POST",
			  url: "getPurchaseInvoice.php",
			  data: $('#frm3').serialize(),
			  success: function(data)
			  {
				  $('.example').html(data);
			  }
		  });
	});
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table style="width:100%" border="1" class="example"  data-page-length="25">
	<thead>
  <tr>
    <th>S.No</th>
    <th>Invoice No.</th>
    <th>Date</th>
    <th>Name</th>
    <th>Total Amount</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody>
  while($row = mysql_fetch_assoc($rs)){
		?>
  <tr>
    <td><?php echo $inc;?></td>
    <td><?php echo $row['hrm_inv_no'];?></td>
    <td><?php echo $row['fdate'];?></td>
    <td><?php if($row['hrm_vendor_name'] != ''){ echo $row['hrm_vendor_name']; } else { echo "Other"; }?></td>
    <?php /*?><td><?php echo $row['hrm_vendor_name'];?></td><?php */?>
    <td><?php echo $row['hrm_net_value'];?></td>
    <td align="center"><a class="iframef"  href="purchaseinvoice.php?actiontype=print&id=<?php echo $row['hrm_inv_no'];?>"><img src="images/print.png"  alt="Print"></a> &nbsp;|&nbsp;<img  id="itemdel" title="Delete" onclick="deletePos('<?php echo $row['hrm_inv_no'];?>')" src="images/b_drop.png" style="cursor:pointer" alt="Delete"></td>
  </tr>
  <?php $inc++; 

}

/*header("Content-type: application/octet-stream");  
header("Content-Disposition: attachment; filename=Purchase-Invoice-".date('Y-m-d').".xls");
header("Pragma: no-cache");  
header("Expires: 0");  
  */
?>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="tableexport/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

<script type="text/javascript" src=""></script>


<script type="text/javascript">
  $(document).ready(function() {
    $('table.example').DataTable( {
        dom: 'lBfrtip',
        buttons: [
         {
                extend: 'excelHtml5',
                 text: 'Save Excel',
                title: 'Purchase Invoice',
                customize: function( xlsx ) {
                var sheet = xlsx.xl.worksheets['sheet1.xml'];
                $('row:first c', sheet).attr( 's', '42' );
            }
            },
            {
                extend: 'pdfHtml5',
                 text: 'Save Pdf',
                title: 'Purchase Invoice'
            }
       ]
    } );
} );
</script>

   	
<div id="purchaseInvoice">
<table style="width:100%" border="1" class="example"  data-page-length="25">
	<thead>
  <tr>
    <th>S.No</th>
    <th>Invoice No.</th>
    <th>Date</th>
    <th>Name</th>
    <th>Total Amount</th>
    <th>Action</th>
  </tr>
  </thead>
 </table>   
  </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

如果我的理解是好的,你想加载一个包含Datatable的php页面,提供一些数据。

如果是这样,.load()方法应该是合适的。

$('.example').load( "getPurchaseInvoice.php", $('#frm3').serialize());