Datatable in php

Datatable in php

DataTables is a jQuery library that displays the list of records in an HTML table with an intuitive interface. It includes search, pagination, sort, filter, and more features.

<head>
<title>Data Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css">
</head>
<div class="container mt-3">
<div class="table-responsive">

<table class="table table-striped" id="datatables">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>

<tbody>
<tr>
<td>1</td>
<td>Pk</td>
<td>Loniya</td>
</tr>

<tr>
<td>2</td>
<td>ak</td>
<td>Loniya</td>
</tr>

<tr>
<td>3</td>
<td>sk</td>
<td>Loniya</td>
</tr>

</tbody>

</table>
</div>
</div>
<script>

$(document).ready(function() {
    $('#datatables').dataTable({
        "scrollX": false,
        "pagingType": "numbers"
    } );
} );

</script>
<style>

.dt-length > label {
margin-left:10px;
}

table.dataTable th,
table.dataTable td {
white-space: nowrap;
}

</style>

 

 

 

 

 

Tags: , , , , , , , , , , , , , , , , ,

Leave a Reply