2012-02-06 140 views
4

我嘗試初始化DataTable,但不能。使用dataTable需要哪些文件?

<style type="text/css" title="currentStyle"> 
    @import "demo_page.css"; 
    @import "demo_table.css"; 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.dataTables.js"></script> 
  1. 有什麼不對?

  2. 表的結構是否需要?

  3. 是否需要數據?

<table id="example">  
    <thead> 
     <tr> 
      <th>Column 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>data</td> 
     </tr> 
    </tbody> 
</table> 
+0

請發佈HTML表格 – 472084 2012-02-06 14:21:11

+0

我會檢查一下。謝謝。 – Spirit 2012-02-06 14:24:46

+0

在我看來,有頭文件泄漏。我將他們的標題重新制作成我的。結果是[它之前有效]它[在我的更改後不起作用]。 – Spirit 2012-02-06 15:16:03

回答

4

你只需要兩個文件來初始化:

  1. 的jQuery(不過你想要把它列入);其次是
  2. jquery.dataTables.js(或縮小版本)。

如果沒有合適的CSS(爲了方便排序圖標而添加各種跨度),您的表格會顯得很瘋狂,但它們不是必需的。他們只是風格。

如果它沒有用這兩個文件和一個$('#myTable').dataTable()調用(在文檔就緒函數中)進行初始化,那麼其他事情正在進行,您將需要查看JavaScript控制檯以查看引發了哪些錯誤。

這是他們jsbin環境:http://live.datatables.net/olofeg

沒有CSS,只是兩個JS文件,一個結構良好的表,並要求從文檔準備功能dataTable()

3

要使用的數據表,你有很多選擇,一種可能是已經形成的阱(用<thead><tbody>)HTML表 「改造」

<style type="text/css" title="currentStyle"> 
    @import "demo_page.css"; 
    @import "demo_table.css"; 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.dataTables.js"></script> 
<table id="example"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>data</td> 
     </tr> 
    </tbody> 
</table> 
<script type="text/javascript"> 
//initialize datatables 
    (function($){ 
     $('#example').dataTable(); 
    }); 
</script> 
+0

不,在添加頭部,身體,文檔類型標籤後無法使用。 – Spirit 2012-02-06 14:45:00

+0

可能取決於文件夾結構。 – Spirit 2012-02-06 14:48:07

+0

@Anton當然這個代碼要求alle文件位於相同的文件夾(demo_table.css,demo_page.css,jquery.dataTables.js,jquery.js和html文件) – 2012-02-06 15:24:41

1

必須調用javascript中的dataTable函數

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("example").dataTable(); 
    }); 
</script> 
0

我研究了一整天。據推測,jQuery被大量人使用,但是我找不到一個'Single'博客,它說明了將所有「最低限度」的內容導入到您的html/jsp中的 利用jQuery數據表功能......因此,我有 編成如下一個小的html頁面此(這是完全 工作的東西,所以請從這裏開始,並建立它自己的方式..)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 
    "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html lang="en"> 
 
<head> \t \t 
 
\t <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
\t <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
 
\t <link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"> 
 
\t  
 
\t <script type="text/javascript"> 
 
\t \t $(document).ready(function() { 
 
\t \t \t $("#companies").dataTable({ 
 
\t \t \t \t "sPaginationType": "full_numbers", 
 
\t \t \t \t "bJQueryUI": true 
 
\t \t \t }); 
 
\t \t }); 
 
\t </script> 
 
</head> 
 
\t 
 
    <body id="dt_example"> 
 
     <div id="container"> 
 
      <div id="demo_jui"> 
 
       <table id="companies" class="display"> 
 
        <thead> 
 
         <tr> 
 
          <th>Company name</th> 
 
          <th>Address</th> 
 
          <th>Town</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>Atlassian</th> 
 
\t \t \t \t \t \t \t <th>Paramatta</th> 
 
\t \t \t \t \t \t \t <th>Sydney</th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>Oracle</th> 
 
\t \t \t \t \t \t \t <th>Whitefield</th> 
 
\t \t \t \t \t \t \t <th>India</th> 
 
\t \t \t \t \t \t </tr> 
 
        </tbody> 
 
       </table> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>