regarding table redraw
regarding table redraw
psYch022
Posts: 6Questions: 4Answers: 0
can some one tell me how to redraw a datatable when user gives a input my code is
and i want to load new data new columns into it please someone help me
<!DOCTYPE html>
<html>
<head>
<title>Data Table | Server Side | Basic | Zero Level</title>
</head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<body>
Polbooth
<input type="text" name="name" id="polbooth"><br>
Sno
<input type="text" name="name" id="sno"><br>
Address
<input type="text" name="name" id="address"><br>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Polbooth</th>
<th>Sno</th>
<th>Address</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Polbooth</th>
<th>Sno</th>
<th>Address</th>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'Bfrtip',
"iDisplayLength": 30,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"bProcessing": true,
"sAjaxSource": "./scripts/multisearch.php",
"aoColumns": [
{ mData: 'polbooth' },{ mData: 'sno' },{ mData: 'address'}
],
fixedHeader: {
header: true,
footer: true
}
} );
$('#polbooth').on('keyup', function(){
table.columns([0]).search(this.value).draw();
});$('#sno').on('keyup', function(){
table.columns([1]).search(this.value).draw();
});$('#address').on('keyup', function(){
table.columns([2]).search(this.value).draw();
});
} );
</script>
</html>
This discussion has been closed.
Answers
Hi @psYch022 ,
Your code looks correct at a glance. A few comments:
column().search()rather thancolumns().search().As I said, it looks fine, we're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin