2012-07-29 60 views
0

我在執行DataTables時遇到了問題,我簡單地無法使它在PHP腳本的返回表中工作。假設這個簡單的PHP腳本命名simple_table.php:來自PHP腳本的實時表上的jQuery DataTables

<?php 
    echo ' 
    <table class="table_type"> 
     <thead> 
      <tr> 
       <th>Column 1</th> 
       <th>Column 2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Row 1 Data 1</td> 
       <td>Row 1 Data 2</td> 
      </tr> 
      <tr> 
       <td>Row 2 Data 1</td> 
       <td>Row 2 Data 2</td> 
      </tr> 
     </tbody> 
    </table>'; 
?> 

現在我也有在hipotetic HTML文件中的</body>標籤後宣佈在未來很簡單的jQuery腳本:

$(document).ready(function() { 
    $('table.table_type').dataTable(); 
}); 

$('div.push_button li').click(function() { 
    var content = $(this).closest('div').children('div.content'); 
    $.get('simple_table.php', {}, function(html_table) { 
      content.html(html_table); 
    }); 
}); 

所需要的是爲這個簡單的例子工作,並保持簡單?問題是沒有解決這個由如此簡單的腳本所產生的動態表格的有用場景!

好吧,也許你必須有一個預先存在的<table>只有yhen能夠填補了各自<tr> ...

回答

1

的問題是,因爲你正在運行.dataTable()頁面有該元素table.table_type之前。當頁面加載時,不需要調用.dataTable(),而需要在將表添加到<div>後運行它。

$('div.push_button li').click(function() { 
    var content = $(this).closest('div').children('div.content'); 
    $.get('simple_table.php', {}, function(html_table) { 
      content.html(html_table); 
      content.find('table').dataTable(); 
    }); 
}); 
+0

謝謝,我意識到,過了一段時間。謝謝。 $('simple_table.php',{},function(html_table){ content.html(html_table); $('table.table_type')。dataTable({bRetrieve:true}) ; }); ... – 2012-07-29 05:45:14