2015-07-12 84 views
1

我想將一個表類和列樣式屬性應用於DataTable。但是,這些屬性實際上都沒有做任何事情。DataTable不能應用樣式

我寫了// doesn't do anything這裏的東西似乎不像我想要的那樣工作。

表格數據在表格創建後不久動態添加。

<html> 
<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/> 
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> 

<script type="text/javascript" src="socket.io/socket.io.js"></script> 
<script type="text/javascript" src="./js/client.js"></script> 

<style> 
     .override { 
    display:solid; !important; 
} 

</style> 
<script> 

$(document).ready(function() { 
    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="stripe" id="example" ></table>'); 
    // class= doesn't do anything 

    t = $('#example').DataTable({ 
     columns: 
     [ 
      {width:"300px", title: "Name",   data: "name" }, 
      // width doesn't do anything 
      {className: "dt[-head|-body]-right", title: "Age", data: "age" },    
      // className doesn't do anything 
      {title: "Nationality", data: "nationality"} 
     ] 
    }); 

    connect();    
}); 
</script> 
</head> 

<body> 
<div id="demo" style="width:500px"> </div> 
</body> 
</html> 
+0

既'width'和'className'應馬上工作,也與您所使用的設置,附加一個''

以'#demo' - 你不加載任何數據,那麼你就已經定義了'columns'中的設置,並且您沒有數據===列設置永遠不會被初始化。 – davidkonrad

回答

0

嘗試在這兩個鏈接的生成中添加'https',然後執行代碼。

1-鏈路HREF = 「HTTPS: //cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css」 的rel = 「樣式表」

2- SCRIPT SRC = 「HTTPS: //cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js」

+0

沒有工作。感謝您的回覆 – user3257755

0

正常嘗試以下解決方案,從CDN加載內容。

<html> 
    <head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/> 
    <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> 

    <script type="text/javascript" src="socket.io/socket.io.js"></script> 
    <script type="text/javascript" src="./js/client.js"></script> 

    <style> 
      .override { 
     display:solid; !important; 
    } 

    </style> 
    <script> 

    $(document).ready(function() { 
     $("#demo").html("<table cellpadding='0' cellspacing='0' border='0' class='stripe' id='example'></table>"); 
     // class= doesn't do anything 

     t = $('#example').DataTable({ 
      columns: 
      [ 
       {width:"300px", title: "Name",   data: "name" }, 
       // width doesn't do anything 
       {className: "dt[-head|-body]-right", title: "Age", data: "age" },    
       // className doesn't do anything 
       {title: "Nationality", data: "nationality"} 
      ] 
     }); 

     connect();    
    }); 
    </script> 
    </head> 

    <body> 
    <div id="demo" style="width:500px"> </div> 
    </body> 
    </html>