Question

我正在尝试将表类和列样式属性应用于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>

Answer 1

尝试添加＆＃39; https＆＃39;在这两个链接的产生，然后执行代码。

1- link href =＆＃34; https： // cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"的rel =＆＃34;样式表＆＃34;

2- script src =＆＃34; https： // cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"

Answer 2

尝试以下解决方案，正确加载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>

DataTable无法应用样式

2 个答案: