我想改變數據表的樣式

我有一個datatable.its看起來非常糟糕。我想改變風格和分頁樣式。任何人都知道請幫助我是附上我的數據表的代碼和當前視圖現在，數據表沒有好的風格。看起來很老。任何人都可以幫我chnage的風格，那麼請幫我我的代碼的index.php我想改變數據表的樣式

<head> 
    <link type="text/css" href="css/jquery-ui.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" src="css/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" language="javascript" src="css/jquery-ui.js"></script> 

</head> 

<body> 
    <form id="mytable"> 
     <div class="container"> 

      <table border="0" cellspacing="5" cellpadding="5"> 
       <tbody> 
        <tr> 
         <td>Minimum Date:</td> 
         <td><input name="min" id="min" type="text" class="datepicker" ></td> 
        </tr> 
        <tr> 
         <td>Maximum Date:</td> 
         <td><input name="max" id="max" type="text" class="datepicker" ></td> 
        </tr> 
       </tbody> 
      </table> 


      <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> 
       <thead> 





        <tr> 
         <th>ID</th> 
         <th>TIME</th> 
         <th>COMPUTER NAME</th> 
         <th>USER</th> 
        </tr> 
       </thead> 
      </table> 




     </div> 
    </form> 
</body> 

<script> 
    $(document).ready(function() { 

     var dataTable = $('#employee-grid').DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       url: "employee-grid-data.php", // json datasource 
       data :function(data){ 
        data.min = $('#min').val(), 
        data.max = $('#max').val() 
       } 

      }, 
      "columns": [ 
       { "data": "id" }, 
       { "data": "datetimes" }, 
       { "data": "computer_name" }, 
       { "data": "user" }, 
      ] 
     }); 

$('#min').change(function(){ 
     dataTable.draw() ; 
}) 
$('#max').change(function(){ 
     dataTable.draw() ; 
}) 
     $('.datepicker').datepicker({ 
      autoclose: true, 
      format: "yyyy-mm-dd", 
      todayHighlight: true, 
      orientation: "top auto", 
      todayBtn: true, 
      todayHighlight: true, 
     }); 




    }); 

//  
</script>

employeegrid.php

<?php 
ini_set('display_errors',1); 

/* Database connection start */ 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "my_db"; 

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); 

/* Database connection end */ 


// storing request (ie, get/post) global array to a variable 
$requestData= $_REQUEST; 


$columns = array( 
// datatable column index => database column name 
    0 =>'id', 
    1 => 'datetimes', 
    2=> 'computer_name', 
    3=> 'user' 
); 

// getting total number records without any search 
$sql = "SELECT id, datetimes, computer_name,user FROM my_table"; 
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get my_table"); 

$totalData = mysqli_num_rows($query); 

$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows. 


if((!empty($requestData['min'])) && (!empty($requestData['max']))){ 
    $minimum_date= date('Y-m-d',strtotime($requestData['min'])); 
    $maximum_date=date('Y-m-d',strtotime($requestData['max'])); 
    $sql.=" where DATE(datetimes)>='".$minimum_date."' AND DATE(datetimes)<='".$maximum_date."' ";  


} 

$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get my_table"); 

$data = array(); 
$i = 0; 
while($row=mysqli_fetch_assoc($query)) { // preparing an array 
    $nestedData=array(); 
     $nestedData['id'] = $row["id"]; 
    $nestedData['datetimes'] = date('Y-m-d',strtotime($row["datetimes"])); ; 
    $nestedData['computer_name'] = $row["computer_name"]; 
    $nestedData['user'] = $row["user"]; 

    $data[] = $nestedData; 
} 



$json_data = array(
      "draw"   => intval($requestData['draw']), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. 
      "recordsTotal" => intval($totalData), // total number of records 
      "recordsFiltered" => intval($totalFiltered), // total number of records after searching, if there is no searching then totalFiltered = totalData 
      "data"   => $data // total data array 
      ); 

echo json_encode($json_data); // send data as json format 

?>

來源

2017-04-25 user7441072

你將不得不支付這傢伙:) – Morpheus

這不是一個免費的編碼服務..這是一個平臺，供用戶提問關於他們可能遇到的具體問題，他們自己無法解決的問題。 –

「*看起來非常糟糕*」，「*看起來非常古老*」等是高度意見的基礎。看看文檔（只是一個狂野的建議），也許你可以找到一些線索，使dataTable看起來不那麼「老」**我提供的代碼https：//datatables.net/examples/styling/index.html** – davidkonrad

這些是您應該將樣式應用於所需設計的css選擇器。

表頭

table>thead>tr>th{ 
    your styling 
    }

分頁

.dataTables_paginate{ 

styles 
}

分頁如果您使用鏈接

.dataTables_paginate a { 
    padding: 6px 9px !important; 
    background: #ddd !important; 
    border-color: #ddd !important; 
}

引導您可能還需要修改bootstrap.min.css線：3936

.pagination>li>a, .pagination>li>span { 
    position: relative; 
    float: left; 
    padding: 6px 12px; 
    margin-left: -1px; 
    line-height: 1.42857143; 
    color: #337ab7; 
    text-decoration: none; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    }

來源

2017-04-25 11:30:41

-2

表的樣式可以找到它BootStrap https://www.w3schools.com/bootstrap/bootstrap_tables.asp 你可以找到很多款式的表

來源

2017-04-25 10:26:03 Anas

除非OP的堆棧中有Bootstrap（他們似乎沒有Bootstrap），或者想要添加Bootstrap，否則這是沒用的。 –

Inspec t使用瀏覽器的開發工具查看錶格的子元素或表格的包裝（取決於您想要的樣式）以查看用於您想要樣式的元素的所有類，並在CSS中使用它們。如果您的項目運行更新，請小心，因爲那樣DataTable開發人員會更改CSS類就會出現問題。

來源

2017-04-25 11:06:29

檢查究竟是什麼元素？ –

表中，因爲它需要樣式。我將編輯答案... –

我想改變數據表的樣式

回答

相關問題