我想改变数据表的样式
Posted
技术标签:
【中文标题】我想改变数据表的样式【英文标题】：i want to change the style of datatable 【发布时间】：2017-09-22 07:27:29 【问题描述】：我有一个数据表。它看起来很糟糕。我想更改样式和分页样式。有人知道请帮助我 我附上了我的数据表的代码和当前视图 现在数据表没有很好的样式。看起来很老。任何人都可以帮我改变风格，然后请帮助我 我的代码 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" >
<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
?>
【问题讨论】：
你得为这个家伙付钱:) 这不是免费的编码服务.. 这是一个供用户就他们可能遇到的、无法自行解决的具体问题提出问题的平台。 “看起来很糟糕”、“看起来很旧”等是高度基于意见的。看看文档（只是一个疯狂的建议）也许你可以找到一些线索让 dataTable 看起来不那么“旧”datatables.net/examples/styling/index.html 我提供了代码。我没有要求必须做，寻求帮助@Morpheus 寻求“改变风格”的帮助 ;) 【参考方案1】：这些是您应该将样式应用于所需设计的 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;
【讨论】：
【参考方案2】：使用浏览器的开发工具检查表格的子元素或表格的包装器（取决于您想要设置的样式），以查看用于您想要设置样式的元素的所有类，并在 CSS 中使用它们。如果您的项目运行更新，请小心，因为这样数据表开发人员更改 CSS 类就会出现问题。
【讨论】：
检查元素究竟是什么？ 在表中，因为它需要样式。我将编辑答案...【参考方案3】：给你：
https://datatables.net/examples/styling/
我建议使用 bootstrap 5 来为您的 dataTable 提供一个不错的样式和分页。只需在您的 js 中添加以下依赖项：
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js
对于 CSS，添加以下链接：
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css
https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css
示例 --> https://datatables.net/examples/styling/bootstrap5.html
您还可以通过编辑 jquery.dataTables.css 文件来更改表格，如边框、阴影、背景颜色等，该文件包含数据表中使用的完整 css 类集。另外，请确保如果您将 dataTables 与引导库集成，请使用 dataTables.bootstrap.min.css 而不是 jquery.dataTables.css，否则样式将不起作用。
【讨论】：
【参考方案4】：table的样式可以在BootStrap上找到https://www.w3schools.com/bootstrap/bootstrap_tables.asp 你可以找到很多表格样式
【讨论】：
除非 OP 在他们的堆栈中有 Bootstrap（他们似乎没有），或者想要添加它，否则这是没用的。以上是关于我想改变数据表的样式的主要内容，如果未能解决你的问题，请参考以下文章
element树形结构封装菜单改变父节点的样式及遍历节点数据