我有一個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
?>
你將不得不支付這傢伙:) – Morpheus
這不是一個免費的編碼服務..這是一個平臺,供用戶提問關於他們可能遇到的具體問題,他們自己無法解決的問題。 –
「*看起來非常糟糕*」,「*看起來非常古老*」等是高度意見的基礎。看看文檔(只是一個狂野的建議),也許你可以找到一些線索,使dataTable看起來不那麼「老」**我提供的代碼https://datatables.net/examples/styling/index.html** – davidkonrad