Question

我的php文件“zero3data.php”

<?php  
        printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">');
        printf('<thead>');
        printf('<tr>');
        printf('<th rowspan="2">#</th>');
        printf('<th rowspan="2">Reference</th>');
        printf('<th rowspan="2">Customer</th>');
        printf('<th rowspan="2">Unit</th>');
        printf('<th rowspan="2">Payment</th>');
        printf('<th rowspan="2">Accessories</th>');
        printf('<th rowspan="2">Points</th>');
        printf('<th rowspan="2">Log</th>');
        printf('<th colspan="2">Approval</th>');
        printf('</tr>');
        printf('<tr>');
        printf('<th>Group Manager</th>');
        printf('<th>Main Branch</th>');
        printf('</tr>');
        printf('</thead>');
        printf('<tbody>');                                  

            require_once("config/db.php");
            $db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
            $result = $db_connection->query('SELECT * FROM reservationvw  ORDER by logsubmit DESC');
            for($i=1;$row=$result->fetch_object();$i++) {               
                printf("<tr class='gradeC'>");      
                    printf("<td class='center'>%d</td>", $i);                       
                    printf("<td class='center'>%s</td>", $row->reference);
                    printf("<td class='center'>%s <br/> %s</td>", strtoupper($row->cust_name), $row->cust_addr);                
                    printf("<td class='center'>%s/%s/%s/%s/%s</td>", $row->model, $row->variant, $row->enginefuel, $row->transmission, $row->color);
                    printf("<td class='center'>%s/%s</td>", $row->payment, $row->insurance);                        
                    printf("<td class='center'>%s</td>", $row->accessories);
                    printf("<td class='center'>%3d</td>", $row->points);    
                    printf("<td class='center'>%s</td>", $row->logsubmit);
                    printf("<td class='center'>%s</td>", $row->approved);
                    printf("<td class='center'>%s</td>", $row->main_approved);                      
                printf("</tr>");
            }   
            printf('</tbody>');
            printf('</table>');

        ?>

我的div标签在zero1.php

<body id="dt_example">      
            <div id="container"> 
                <div id="demo"> 
                         <div id="content"></div>
                </div> 
            <div>  
</body>

现在我的脚本将我的php加载到“内容”，表格结构呈现正常，但是，CSS样式已经消失，我的表格是用DataTables插件定制的，可以在http://datatables.net/usage/找到...反正，继承我的剧本。

<script>    
$(document).ready(function(){
$('#content').load('zero3data.php'); 
});
</script>

这是我到目前为止所尝试的...表格渲染很好，但仍然没有CSS风格

 $.ajax({
    url: 'zero3data.php',
    success: function(data) {    
    $("#content").html(data).trigger('create');
    }
    });

我也试过这个......

$('#content').load('zero3data.php',function(){ $('#content').trigger('create'); });

我甚至将必要的css样式zero1.php复制到zero3data.php，认为应该再次加载样式...

这是我从zero1.php开始的，如果有帮助的话......

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />

    <title>DataTables example</title>
    <style type="text/css" title="currentStyle">
        @import "../../media/css/demo_page.css";
        @import "../../media/css/demo_table.css";
    </style>

    <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>

    <!-- bootstrap -->
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <script src="../../js/jquery-2.0.3.min.js"></script> 
    <script src="../../js/bootstrap.min.js"></script>

    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#example').dataTable();
        } );
    </script>

</head>

Answer 1

用直接链接替换@import。

<link rel="stylesheet" type="text/css" href="../../media/css/demo_page.css" />
<link rel="stylesheet" type="text/css" href="../../media/css/demo_table.css" />

因为CSS默默地忽略它不理解的东西，我不确定console.log会显示错误。使用上面的结构，您可以验证正确的路径，甚至可以直接在Web检查器中查看样式表内容。

jquery加载后，“DataTable”CSS样式消失了

1 个答案: