2017-04-25 59 views
0

当我显示引导DataTable中使用AJAX jQuery的数据,则分页和搜索框不display.so如何解决这个问题分页和搜索框时填写数据使用AJAX的jQuery

我的HTML代码示例中bootstarp数据表不显示在这儿。

<div class="row" style="margin-top: 2em;"> 
    <div class="panel panel-white"> 
     <div class="panel-heading clearfix"> 

     </div> 
     <div class="panel-body"> 
      <div id="live_data" > 
      //data table display here       
      </div> 
     </div> 
    </div> 

我的AJAX文件中的代码是在这里

<?php 

    $output='';  
    $output.=' <div class="table-responsive"> 
        <table id="example" class="table table-striped table- 
        bordered" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td>2011/04/25</td> 
      <td>$320,800</td> 
     </tr> 
     <tr> 
      <td>Garrett Winters</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 
      <td>63</td> 
      <td>2011/07/25</td> 
      <td>$170,750</td> 
     </tr> 
     <tr> 
      <td>Ashton Cox</td> 
      <td>Junior Technical Author</td> 
      <td>San Francisco</td> 
      <td>66</td> 
      <td>2009/01/12</td> 
      <td>$86,000</td> 
     </tr>               
    </tbody> 
</table> 
</div>'; 
echo $output; 
?> 

我的jQuery的功能在这里

getcamera(); 
     function getcamera(){ 
      $.ajax({ 
       type:"POST", 
       url:'../ajaxfiles/ajax_getcamera.php', 
       success:function(data){ 
        $('#live_data').html(data); 

       } 
      }); 
     } 


This above code is work properly but search box and pagination is not display 

那么如何解决这个问题???

回答

0
`getcamera(); 
    function getcamera(){ 
     $.ajax({ 
      type:"POST", 
      url:'../ajaxfiles/ajax_getcamera.php', 
      success:function(data){ 
       $('#live_data').html(data); 
       $('#example').DataTable();// Add this line. 
      } 
     }); 
    }` 

上面的代码将工作。这不是最好的解决方案。 为了获得良好的Ajax实现你可以在 https://datatables.net/examples/ajax/simple.html而且https://datatables.net/examples/server_side/simple.html

+0

$(“#live_data”)见示例用法的DataTable(); //添加此行 –

+0

该行没有我 –

+0

您使用的datatables.net工作。 –