"数据表”;jquery加载后CSS样式消失

"DataTable" CSS style gone after jquery load

本文关键字：CSS 样式 加载 消失 jquery quot 数据表      更新时间：2024-04-24

我的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>');
        ?>

我在zero1.php 中的div标记

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

现在我有了将php加载到"content"的脚本，表结构被渲染得很好，然而，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>

用直接链接替换@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检查器中查看样式表内容。

相关文章：