Individual Column Searching Issue
Individual Column Searching Issue
belgusinc
Posts: 1Questions: 0Answers: 0
Hi guys....I'm not an expect on coding but was able to create a server side datatables and it works great with 14M lines! The only problem I have is that I dont know how to add "Individual column searching (text inputs)". I know there is a link with what to do but no matter how many times I try, nothing seems to work. Can someone take a look at my code and guide me with what I need to add and where?
Here is my code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css"/>
<title></title>
<style>
table.dataTable thead {
background-color: #110761;
color:white;
}
</style>
</head>
<body>
<h2 class="text-center">Datatables</h2>
<h3 class="text-center">Procesamiento ServerSide</h3>
<table id="tablaUsuarios" class="table table-striped table-bordered display nowrap dataTable no-footer" style="width:100%">
<thead class="text-center">
<tr>
<th>Arrival Date</th>
<th>Port of Lading</th>
<th>Shipper</th>
<th>Description</th>
<th>Consignee</th>
<th>Notify Party</th>
<th>Port_of Unlading</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Datatables-->
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
<script>
$(document).ready(function(){
$("#tablaUsuarios").DataTable({
"processing": true,
"serverSide": true,
"sAjaxSource": "ServerSide/serversideUsuarios.php",
"columnDefs":[{
"data":null
}]
});
});
</script>
</body>
</html>
This discussion has been closed.
Replies
Looks like you need to add a footer in your HTML. The text input search example is placed in the footer. Click the HTML table of the example to see the footer.
Kevin