我想更改datatable的样式

Question

我的datatable.its看上去很糟糕。我想改变样式和分页，style.anybody知道，请帮助我附加我的数据表的代码和当前视图，现在datatable没有好的样式。看上去很老。任何人都可以帮我裁剪样式，然后请帮助我的代码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

?>

​

​

Answer 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;
    }

Answer 2

使用浏览器的Dev工具检查表或表包装器的子元素(取决于您想要的样式)，查看所有用于您希望样式的元素的类，并在CSS中使用它们。如果您的项目运行更新，请小心，因为这将是dataTable开发人员更改CSS类的问题。

Answer 3

给你：

https://datatables.net/examples/styling/

我建议您选择引导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类的jquery.dataTables.css文件，对表进行更改，如边框、阴影、背景色等。此外，如果要将dataTables与引导程序库集成，请使用dataTables.bootstrap.min.css而不是jquery.dataTables.css，否则样式将无法工作。