Datentabelle Selbstauffrischbefehl verändert die CSS der Tabelle

Ich habe dieses Table.phpDatentabelle Selbstauffrischbefehl verändert die CSS der Tabelle

<?php 
 
$connect = mysqli_connect("dbexample.com", "dboexample", "password", "dbexample"); 
 
$query ="SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC"; 
 
$result = mysqli_query($connect, $query); 
 
?> 
 
<!DOCTYPE html> 
 
<html> 
 
     <head> 
 
      <title>Load Board</title> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
      <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
      <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
 
      <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>  
 
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> 
 
      <script> 
 
$(document).ready(function(){ 
 
     $('#employee_data').DataTable(); 
 
}); 
 
setInterval(function() { 
 
     table.fnReloadAjax(); 
 
}, 3000); 
 
</script> 
 
     </head> 
 
     <body> 
 
      <br /><br /> 
 
      <div class="container"> 
 
       <h3 align="center">Load Board</h3> 
 
       <br /> 
 
       <div class="table-responsive"> 
 
        <table id="employee_data" class="table table-striped table-bordered"> 
 
          <thead> 
 
           <tr> 
 
            <td>Date</td> 
 
            <td>Time</td> 
 
            <td>Zip</td> 
 
            <td>City</td> 
 
            <td>Country</td> 
 
            <td>Date</td> 
 
            <td>Time</td> 
 
            <td>Zip</td> 
 
            <td>City</td> 
 
            <td>Country</td> 
 
            <td>Description</td> 
 
           </tr> 
 
          </thead> 
 
          <?php 
 
          while($row = mysqli_fetch_array($result)) 
 
          { 
 
           echo ' 
 
           <tr> 
 
            <td>'.$row['shipping_date_c'].'</td> 
 
            <td>'.$row['shipping_time_c'].'</td> 
 
            <td>'.$row["billing_address_postalcode"].'</td> 
 
            <td>'.$row["billing_address_city"].'</td> 
 
            <td>'.$row["billing_address_country"].'</td> 
 
            <td>'.$row['arrival_date_c'].'</td> 
 
            <td>'.$row['arrival_time_c'].'</td> 
 
            <td>'.$row["shipping_address_postalcode"].'</td> 
 
            <td>'.$row["shipping_address_city"].'</td> 
 
            <td>'.$row["shipping_address_country"].'</td> 
 
            <td>'.$row["description"].'</td> 
 
           </tr> 
 
           '; 
 
          } 
 
          ?> 
 
        </table> 
 
       </div> 
 
      </div> 
 
     </body> 
 
    
 
</html>

ich eine Datei index.php mit diesem Code erstellen:

<title>Glastopf Observation Center</title> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
    
 
<script type="text/javascript">// <![CDATA[ 
 
$(document).ready(function() { 
 
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh 
 
setInterval(function() { 
 
$('#results').load('table.php'); // table.php is where I have my table 
 
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds. 
 
}); 
 
// ]]></script> 
 
    
 
<div id="results">Loading data ...</div>

Es funktioniert, habe ich die autrefresh meiner Daten auf dem Tisch, aber ich habe alle 3 Sekunden, um diese CSS-Problem:

This is how it looks as usual

This is how it looks after 3 seconds

ich die CSS-Links in die index.php setzen Datei, die ich bereits erwähnt habe, aber ich habe immer noch die gleichen CSS-Probleme:

<title>Glastopf Observation Center</title> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
      <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
      <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
 
      <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>  
 
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> 
 
    
 
<script type="text/javascript">// <![CDATA[ 
 
$(document).ready(function() { 
 
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh 
 
setInterval(function() { 
 
$('#results').load('table.php'); 
 
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds. 
 
}); 
 
// ]]></script> 
 
    
 
<div id="results">Loading data ...</div>

Quelle

2017-11-20 Nicola Pigozzo

In Mein Fall ich manuell 'addClass' über jQuery nach dem Laden der Tabelle; Beispiel: '$ ('# table_filter div'). addClass ('Eingabefeld col s12');'. Sie müssen nur das richtige Element über den Entwicklermodus finden. – juntapao

Hallo Juntapao, vielen Dank für Ihren Vorschlag. Könnten Sie mir bitte ein Beispiel geben, das ich in meinem Fall verwenden kann? Danke –

würdest du eine Geige schaffen? – juntapao

Ich habe es funktioniert ...

In Ihrem Table.php (Sie haben PDO zu verwenden statt MySQLi):

<?php 
$pdo = new PDO("mysql:dbname=dbexample;host=dbexample.com;port=3306", "dboexample", "password"); 
$query = $pdo->prepare("SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC"); 
$query->execute(); 
echo json_encode($query->fetchAll()); 
?>

In index.php:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Load Board</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>  
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> 
</head> 
<body> 
    <br /><br /> 
    <div class="container"> 
     <h3 align="center">Load Board</h3> 
     <br /> 
     <div class="table-responsive"> 
      <table id="employee_data" class="table table-striped table-bordered"></table> 
     </div> 
    </div> 
    <script> 
     $(document).ready(function() { 
      var table; 
      $.post('table.php', {}, function(data) { 
       if(data) { 
        console.log(data); 
        table = $('#employee_data').DataTable({ 
         data: data, 
         columns: [ 
          {'data': 'shipping_date_c', 'title': 'Date'} 
          ,{'data': 'shipping_time_c', 'title': 'Time'} 
          ,{'data': 'billing_address_postalcode', 'title': 'Zip'} 
          ,{'data': 'billing_address_city', 'title': 'City'} 
          ,{'data': 'billing_address_country', 'title': 'Country'} 
          ,{'data': 'arrival_date_c', 'title': 'Date'} 
          ,{'data': 'arrival_time_c', 'title': 'Time'} 
          ,{'data': 'shipping_address_postalcode', 'title': 'Zip'} 
          ,{'data': 'shipping_address_city', 'title': 'City'} 
          ,{'data': 'shipping_address_country', 'title': 'Country'} 
          ,{'data': 'description', 'title': 'Description'} 
         ] 
        }); 
       } 
      }, 'json'); 
      setInterval(function() { 
       table.clear().draw(); 
       $.post('table.php', {}, function(data) { 
        table.rows.add(data).draw(); 
       }, 'json'); 
      }, 3000); 
     }); 
    </script> 
</body> 
</html>

Quelle

2017-11-22 07:34:54 juntapao

Datentabelle Selbstauffrischbefehl verändert die CSS der Tabelle

Antwort

Verwandte Themen