i have a datatable and i add two date fields and a button search, it gives me an error: TypeError: c is undefined.
hi, i have a datatable and i add two date fields and a button search, it gives me an error: TypeError: c is undefined.
hi, i have a datatable and i add two date fields and a button search, it gives me an error: TypeError: c is undefined.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<meta charset="UTF-8" />
<div class="form-group col-md-4 offset-4">
<label>start date</label>
<input type="date" id="datePicker" class="form-control date-range">
<label>end date</label>
<input type="date" id="datePicker1" class="form-control date-range">
</div>
<div class="form-group offset-5">
<button class="btn btn-success " id="hide">search</button>
</div>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>date of birth</th>
<th>name</th>
<th>email</th>
<th> adress</th>
<th>salary</th>
</tr>
</thead>
<tbody>
@foreach($pointages as $pointage)
<tr>
<td>{{ $pointage->datep }}</td>
<td>{{ $pointage->chantier }}</td>
<td>{{ $pointage->ouvrage }}</td>
<td>{{ $pointage->nbrj }}</td>
<td>{{ $pointage->solde }}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js" integrity="sha256-H9jAz//QLkDOy/nzE9G4aYijQtkLt9FvGmdUTwBk6gs=" crossorigin="anonymous"></script>
jQuery code
table = $('#example').DataTable({
paging: false,
info: false
});
// Extend dataTables search
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = $('#datePicker').val();
var max = $('#datePicker1').val();
var birthday = data[0] || 0; // Our date column in the table
if (
(min == "" || max == "") ||
(moment(birthday).isSameOrAfter(min) && moment(birthday).isSameOrBefore(max))
) {
return true;
}
return false;
}
);
// Re-draw the table when the a date range filter changes
$('#hide').click(function(){
table.draw();
})
// Re-draw the table when the a date range filter changes
$('.date-range').change(function() {
//table.draw();
});
2
Answers
remove your extra
<td></td>
the datatables library you are using need the number of headers and tds to match. you have 5<th>
and 6<td>
the format is you must required to have thead and tbody enclosed