Question

我有一个datatable.its看起来很糟糕。我想改变风格和分页风格。有人知道请帮助我我附加了我的数据表的代码和当前视图现在数据表没有好的风格。看起来很老。任何人都可以帮助我完成风格，请帮助我我的代码的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，你可能还需要修改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

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

Answer 3

表的样式可以在BootStrap https://www.w3schools.com/bootstrap/bootstrap_tables.asp上找到它你可以找到很多桌子的样式

我想改变数据表的风格

3 个答案: