2013-02-23 239 views
0

我試圖設置jquery datatables插件,但是,我跑到一堵磚牆。以下是我到目前爲止... 我創建了一個名爲「 testtable.php「以下是它的內容。jquery datatables設置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Cloudone Chart Of Accounts</title> 

<script type="text/javascript" src="js/jquery.dataTables.js"></script> 
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script> 

<script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
    $('#example').dataTable({ 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "server_processing.php" 


    }); 
}); 

     </script> 
     <link href="css/demo_table.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<table width="101%" border="0" class="display" id="example"> 
<thead> 
    <tr> 
    <th width="32%" scope="col">Rendering Engine;</th> 
    <th width="28%" scope="col">&nbsp;</th> 
    <th width="10%" scope="col">&nbsp;</th> 
    <th width="10%" scope="col">&nbsp;</th> 
    <th width="10%" scope="col">&nbsp;</th> 
    <th width="10%" scope="col">&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>engine</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    </tbody> 
</table> 

</body> 
</html> 

使用我創建了一個叫做「server_processing.php」填入必要的連接設置,並把它與測試服務器上的「testtable.php」第二頁datatables.net提供的樣品。 我使用的datatables.net概述的基本配置,只是爲了讓事情和運行,所以我可以有一個遊戲周圍熟悉自己的工作。這就是我難住,我無法讓頁面呈現結果。我懷疑在連接中省略了一些東西,以及定義要在顯示頁面「testtable.php」中顯示的變量的過程。

任何人都可以指出我在哪裏誤入歧途或引用jQuery數據表服務器端處理的一步一步的設置示例。

感謝的 大衛

+0

我建議你先嚐試沒有服務器端處理,所以刪除您現在有3個選項,而只是把testtable.php頁上的數據 – Xeli 2013-02-23 13:16:37

+0

嗨這不是一個不好的主意,你能舉一個簡單的例子來說明要包含在網頁上的數據嗎?並且這將是json格式。 – David 2013-02-23 14:23:10

回答

0

爲了讓您一開始沒有服務器端處理(如果你沒有這應該是罰款太多行)

創建HTML頁面,就像你現在做BU填寫的表格與您的數據

這樣:

<table width="101%" border="0" class="display" id="example"> 
    <thead> 
     <tr> 
      <th width="32%" scope="col">Rendering Engine;</th> 
      <th width="28%" scope="col">&nbsp;</th> 
      <th width="10%" scope="col">&nbsp;</th> 
      <th width="10%" scope="col">&nbsp;</th> 
      <th width="10%" scope="col">&nbsp;</th> 
      <th width="10%" scope="col">&nbsp;</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>engine</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>engine1</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>engine1</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

,然後簡單地初始化不帶任何選項的數據表。

一個活生生的例子見本:http://jsfiddle.net/V97jd/

+0

謝謝你,感謝你的幫助。 – David 2013-02-24 23:10:43