從單獨的.php表初始化dataTable

我想從一個單獨的.php文件構建一個表初始化一個dataTable。它構建表可以，但dataTable屬性似乎不起作用。從單獨的.php表初始化dataTable

這裏是我的代碼：

的index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <script type="text/javascript" language="javascript" src="jquery.js"></script> 
     <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script> 
     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $('#live_table').load("table.php"); 
       var refreshId = setInterval(function() { 
        $('#live_table').load("table.php"); 
       }, 2000); 
       $.ajaxSetup({ cache: false }); 
       $('#data').dataTable(); 
      }); 
     </script> 
     <title></title> 
    </head> 
    <body> 
     <div id="live_table"> 
     </div> 
    </body> 
</html>

table.php

<table id="data"> 
    <thead> 
     <tr> 
      <th>Foo</th> 
      <th>Bar</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
    </tbody> 
</table>

的index.php是爲了刷新表每2000毫秒和table.php實際上是在我的實際情況中更復雜，並且需要條件單元格背景和鏈接，這就是爲什麼我沒有選擇使用服務器端處理（JSON）來處理表格數據的原因。

任何想法爲什麼$('#data').dataTable();命令不起作用？

來源

2012-07-13 Das.Rot

即使是像你說的複雜，我還是積極的，這將是更快和更容易使用服務器端。但是，要回答你的問題，我們需要更多的細節。如什麼屬性不生效。它不工作，你看到的風格，但沒有表/功能？ – Drakkainen 2012-07-13 16:44:38

我所看到的只是普通HTML格式的表格，它看起來不像「dataTable」表格。 – 2012-07-13 16:46:39

我已經轉載了此行爲：http://jsfiddle.net/sAnUL/ – mellamokb 2012-07-13 16:47:58

我認爲這是不加載，因爲你使用的是並不存在一個選擇。

嘗試：

$(document).ready(function() { 
      $('#live_table').load("table.php"); 
      var refreshId = setInterval(function() { 
       $('#live_table').load("table.php"); 
      }, 2000); 
      $.ajaxSetup({ cache: false }); 
      $('#data').dataTable(); //This line should be in table.php

技術上存在的DOM元素沒有#DATA。你應該把table初始化放在table.php文件中。

來源

2012-07-13 16:50:44 Drakkainen

看起來問題是.dataTable()的調用發生在表被實際加載之前，因爲.load調用異步發生，並且代碼的其餘部分保持運行。你需要調用.dataTable()請求已經使用第三個參數結束到.load後：

$('#live_table').load(
    "table.php", 
    {}, 
    function() { $('#data').dataTable(); } 
);

演示：http://jsfiddle.net/sAnUL/1/

來源

2012-07-13 16:50:33 mellamokb

我不知道爲什麼，但這並不適合我。我只是在我的table.php中放置了$（'＃data'）。dataTable（）;'，它工作正常。謝謝！ – 2012-07-13 17:02:50

可以使用回調函數load()方法：

$('#live_table').load("table.php", function(){ 
    $('#data').dataTable(); 
});

，或者使用ajaxSuccess()：

附加的功能將被執行每當Ajax請求成功完成。這是一個Ajax事件。

$('#data').ajaxSuccess(function(){ 
    $(this).dataTable() 
})

來源

2012-07-13 16:52:49 undefined

從單獨的.php表初始化dataTable

回答

相關問題