SearchPanes with DateRangePicker don't work
SearchPanes with DateRangePicker don't work
erratchumatias
Posts: 1Questions: 0Answers: 0
Hello good evening. He integrated SearchPanes into my Datatable, and he also externally integrated a filter for date range that can be selected with DateRangePicker. The problem is that if I filter first with search panels and then apply the date filter it works. But if I do the reverse and first filter the date, my search appears with "No matching records found." My table is loaded with ajax. I attach images and my JS code. Thank you
/=============================================
TABLA PAGOS EFECTIVO
=============================================/
var table = $(".tablaPagos").DataTable({
"ajax":"ajax/tablaPagos.ajax.php",
"deferRender": true,
"retrieve": true,
"ordering": false,
"processing": true,
"search": {
"regex": true,
"caseInsensitive": true,
},
buttons:[
{
extend: 'searchPanes',
config: {
cascadePanes: true,
layout: 'columns-5',
columns: [1, 15, 13, 14, 11, 9, 3, 4, 12, 2],
ShowDisabledButtons: false,
viewTotal: true,
}
}
],
"dom": 'Bfrtip',
"bFilter": true,
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_",
"sInfoEmpty": "Mostrando registros del 0 al 0",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar en todos: ",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"searchPanes": {
clearMessage: 'Desactivas seleccionados',
collapse: 'Mas Filtros',
title:{
_: 'Filtros seleccionados - %d',
0: 'No hay filtros seleccionados',
1: 'Un filtro seleccionado',
}
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
"rowGroup": {
endRender: function (rows, group) {
var avg = rows
.data()
.pluck(6)
.reduce( function (a, b) {
return a + b.replace('$', '')*1;
}, 0);
return 'TOTAL: '+
$.fn.dataTable.render.number(',', '.', 0, '$').display( avg );
},
dataSrc: 0
},
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": true,
"searchPanes":{
show: false,
}
},
{
"targets": [ 1 ],
"visible": true,
"searchable": true,
"searchPanes":{
show: true,
hideCount: true,
}
},
{
"targets": [ 2 ],
"visible": true,
"searchable": true,
"searchPanes":{
show: true,
hideCount: true,
}
},
{
"targets": [ 3 ],
"visible": true,
"searchable": true,
"searchPanes":{
show: true,
}
},
{
"targets": [ 4 ],
"visible": true,
"searchable": true,
"searchPanes":{
show: true,
}
},
{
"targets": [ 11 ],
"visible": false,
"searchable": true,
"searchPanes":{
show: true,
}
},
{
"targets": [ 12 ],
"visible": false,
"searchable": true,
"searchPanes":{
show: true,
}
},
{
"targets": [ 13 ],
"visible": false,
"searchable": true,
"searchPanes":{
show: true,
}
},
{
"targets": [ 14 ],
"visible": false,
"searchable": true,
"searchPanes":{
show: true,
}
},
{
"targets": [ 15 ],
"visible": false,
"searchable": true,
"searchPanes":{
show: true,
}
}
],
});
$(function() {
var start = moment().subtract(1, 'days');
var end = moment();
function cb(start, end) {
$('#Date_searchSpan').html('hola');
}
$('#Date_search').daterangepicker({
"locale": {
"format": "YYYY-MM-DD",
"separator": " de ",
"applyLabel": "Applicar",
"cancelLabel": "Cancelar",
"fromLabel": "Desde",
"toLabel": "Hasta",
"customRangeLabel": "Personalizado",
"weekLabel": "S",
"daysOfWeek": [
"Do",
"Lu",
"Ma",
"Mi",
"Ju",
"Vi",
"Sa"
],
monthNames: [
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre",
],
},
"opens": "center",
firstDay: 1,
startDate: start,
endDate: end,
ranges: {
'Hoy': [moment(), moment()],
'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Ultimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Ultimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mes': [moment().startOf('month'), moment().endOf('month')],
'Ultimo Mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Todos': [moment().subtract(360, 'days'), moment()],
}
}, function(start, end, label) {
maxDateFilter = end;
minDateFilter = start;
$('#Date_searchSpan').html(start.format('DD/MM/YYYY')+ '-' + end.format('DD/MM/YYYY'));
table.draw();
});
minDateFilter = "";
maxDateFilter = "";
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = minDateFilter;
var max = maxDateFilter;
var createdAt = data[7] || 7; // Our date column in the table
if (
(min == "" || max == "") ||
(moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
) {
return true;
}
return false;
}
);
https://ibb.co/VTxVDbW
https://ibb.co/n0t0n4t
https://ibb.co/n3PPw2z
Replies
Thats a lot of code to look through. Please provide a link to your page or a test case replicating the problem so we can see how the code is behaving with your data.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin