 <!-- Main content -->
 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> 
    <script language="JavaScript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script language="JavaScript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script language="JavaScript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
     
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.colVis.min.js"></script>

<?php
require_once("./connection_sql.php");
?>

<style>

    .view-cell{
        background-color: red;
        color: white; 
    }
    .table-hover tbody tr:hover td {
        background: aqua;
    }
</style>
<section class="content" onload="search1();">

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Login Details</h3>
        </div>
        <form role="form" class="form-horizontal">
            <div class="box-body"> 
                <div class="panel-body" style="overflow-x: auto">
                     
                <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example" style="width:auto">
                    <thead> 

                     <tr class="danger"> 
                        <th>USER</th>
                        <th>DATE</th>   
                        <th>TIME</th>   
                        <th>IP</th>     
                    </tr>
                </thead>


                <tbody>
                    <?php
                    $i=1;
                  
                
                    $sql = "select * from loging  where Date>'2022-01-01' order by id desc";


                    foreach ($conn->query($sql) as $row) {
                             
                        ?>
                        <tr>
                            
                            <td onclick="name(this)"><?php echo $row['Name']; ?></td>   
                            <td onclick="name(this)"><?php echo $row['Date']; ?></td>   
                            <td onclick="name(this)"><?php echo $row['Logon_Time']; ?></td>   
                            <td onclick="name(this)"><?php echo $row['ip']; ?></td>  
                    </tr>

                    <?php
                    $i= $i+1;
                }
                ?>
            </tbody>
        </table>

    </div>

    <!-- =============================== -->

 

<!-- =============================== -->



</div>
</form>
</div>
</section>

 

<script type="text/javascript">
                $(document).ready(function() {
          var table = $('#dataTables-example').DataTable( {
             lengthChange: true,
            fixedHeader: true,
            responsive: true,
            "deferRender": true, 
             "order": [[ 0, 'asc' ]], 
               dom: 'Bfrtip',
        lengthMenu: [[ 25, 50,100, -1 ],[ '25 rows', '50 rows', '100 rows', 'Show all' ]],
         "pageLength": -1,
        buttons: [
            'pageLength','print','colvis'
        ]
              

        } );

$('div.dataTables_filter input', table.table().container()).focus();
          table.buttons().container()
          .appendTo( '#example_wrapper .col-md-6:eq(0)' );
           
      } );
        </script>