I have this table in HTML which takes some dynamic values in PHP and displays them. In the left side of it I have checkboxes but I when I added them in the table, it disordered the rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Devices</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXP68768vTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="content">
<table id="usetTable" class="table">
<thead>
<th>Device name</th>
<th>Device no</th>
<th>Barcode</th>
</thead>
<tbody>
<form method="post">
<?php if (!empty($arr_devices)) { ?>
<?php foreach ($arr_devices as $device) : ?>
<tr>
<td>
<input type="checkbox" name="devices[]" value="<?php echo $device["id"] ?>">
</td>
<td>
<?php echo '<a href=error_report.php?device_id=' . urlencode($device["id"]) . "&dev_name=" . urlencode($device["name"]) . "&imei=" . urlencode($device["serial_imei"]) . "&serial_no=" . urlencode($device["serial_no"]) . "&device_no=" . urlencode($device["device_no"]) . '>' . $device["name"] . '</a>'; ?>
</td>
<td>
<?php echo '<a href=error_report.php?device_id=' . urlencode($device["id"]) . "&dev_name=" . urlencode($device["name"]) . "&imei=" . urlencode($device["serial_imei"]) . "&serial_no=" . urlencode($device["serial_no"]) . "&device_no=" . urlencode($device["device_no"]) . '>' . $device["device_no"] . '</a>'; ?>
</td>
<td>
<?php echo '<a href=error_report.php?device_id=' . urlencode($device["id"]) . "&dev_name=" . urlencode($device["name"]) . "&imei=" . urlencode($device["serial_imei"]) . "&serial_no=" . urlencode($device["serial_no"]) . "&device_no=" . urlencode($device["device_no"]) . '>' . $device["barcode"] . '</a>'; ?>
</td>
</tr>
<?php endforeach; ?>
<?php } ?>
<input class="btn" type="submit" name="submit" value="Report">
<form>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#usetTable').DataTable();
});
</script>
</body>
</html>
Moreover, this hides the search bar that bootstrap provides. If I remove the checkbox, the search bar appears again.
Aucun commentaire:
Enregistrer un commentaire