fix : recherche globale + tous les champs
This commit is contained in:
parent
0a536140ab
commit
77bf98e6cd
|
|
@ -42,25 +42,99 @@ table.dataTable thead th>div {
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#historiqueParcours_filter label {
|
#historiqueParcours_filter {
|
||||||
display: flex;
|
margin-bottom: 20px;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dataTables_wrapper .dataTables_filter {
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
float: left;
|
||||||
|
padding: 2px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cacher complètement le label "Rechercher" de DataTables */
|
||||||
|
.dataTables_wrapper .dataTables_filter label {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0 !important;
|
||||||
|
line-height: 0 !important;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_wrapper .dataTables_filter label > span:first-child {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fond blanc, bordure grise fine, capsule arrondie */
|
||||||
.dataTables_wrapper .dataTables_filter input[type="search"] {
|
.dataTables_wrapper .dataTables_filter input[type="search"] {
|
||||||
background-color: transparent;
|
background-color: #fff;
|
||||||
border: none;
|
border: 1px solid #e0e0e0;
|
||||||
border-bottom: 1px solid #26a69a;
|
border-radius: 42px;
|
||||||
border-radius: 0;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
height: 3rem;
|
height: 42px;
|
||||||
width: 100%;
|
width: 220px;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
margin: 0 0 8px 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0 20px 0 52px;
|
||||||
box-shadow: none;
|
box-sizing: border-box;
|
||||||
box-sizing: content-box;
|
transition: all 0.2s ease;
|
||||||
transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
|
color: #333;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: #1d9bf0;
|
||||||
|
box-shadow: 0 0 0 2px #1d9bf0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
|
||||||
|
color: #71767a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icône de loupe SVG */
|
||||||
|
.dataTables_wrapper .dataTables_filter label::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371767a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Texte "Rechercher" à côté de l'icône */
|
||||||
|
.dataTables_wrapper .dataTables_filter label::after {
|
||||||
|
content: "Rechercher";
|
||||||
|
position: absolute;
|
||||||
|
left: 52px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 15px;
|
||||||
|
color: #71767a;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cacher le texte "Rechercher" quand on tape, focus, ou si l'input a une valeur */
|
||||||
|
.dataTables_wrapper .dataTables_filter:focus-within label::after,
|
||||||
|
.dataTables_wrapper .dataTables_filter label.has-value::after {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_wrapper .dataTables_filter input[type="search"]:focus::placeholder {
|
||||||
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#historiqueParcours_length>label {
|
#historiqueParcours_length>label {
|
||||||
|
|
@ -83,7 +157,7 @@ table.dataTable thead th>div {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style Input search by row */
|
/* Style Input recherche par ligne */
|
||||||
#historiqueParcours>thead>tr:nth-child(2)>th>input {
|
#historiqueParcours>thead>tr:nth-child(2)>th>input {
|
||||||
font-size: 13px !important;
|
font-size: 13px !important;
|
||||||
padding: 6px !important;
|
padding: 6px !important;
|
||||||
|
|
@ -105,7 +179,7 @@ table.dataTable thead .sorting_desc:before {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
/* boutons de navigationw */
|
/* boutons de navigation */
|
||||||
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||||
background-color: white !important;
|
background-color: white !important;
|
||||||
border: darkblue solid 1.5px !important;
|
border: darkblue solid 1.5px !important;
|
||||||
|
|
|
||||||
|
|
@ -348,14 +348,29 @@ function initServerSideDataTable() {
|
||||||
|
|
||||||
// Recherche globale : debounce y compris ENTER (plus de bypass immédiat)
|
// Recherche globale : debounce y compris ENTER (plus de bypass immédiat)
|
||||||
const $globalInput = $('div.dataTables_filter input[type="search"]');
|
const $globalInput = $('div.dataTables_filter input[type="search"]');
|
||||||
|
const $filterLabel = $globalInput.closest('label');
|
||||||
$globalInput.off('.DT'); // nettoie handlers datatables
|
$globalInput.off('.DT'); // nettoie handlers datatables
|
||||||
const debouncedGlobal = debounce((v) => {
|
const debouncedGlobal = debounce((v) => {
|
||||||
api.search(v);
|
api.search(v);
|
||||||
api.ajax.reload();
|
api.ajax.reload();
|
||||||
}, 350);
|
}, 350);
|
||||||
|
|
||||||
|
// Fonction pour gérer l'affichage du texte "Rechercher"
|
||||||
|
function toggleSearchPlaceholder() {
|
||||||
|
if ($globalInput.val().trim() !== '') {
|
||||||
|
$filterLabel.addClass('has-value');
|
||||||
|
} else {
|
||||||
|
$filterLabel.removeClass('has-value');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$globalInput.on('input keyup keydown', function () {
|
$globalInput.on('input keyup keydown', function () {
|
||||||
debouncedGlobal(this.value);
|
debouncedGlobal(this.value);
|
||||||
|
toggleSearchPlaceholder();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Vérifier l'état initial
|
||||||
|
toggleSearchPlaceholder();
|
||||||
|
|
||||||
// Recherche par colonne avec DEBOUNCE (ENTER inclus)
|
// Recherche par colonne avec DEBOUNCE (ENTER inclus)
|
||||||
const debouncedColSearch = debounce((i, val) => {
|
const debouncedColSearch = debounce((i, val) => {
|
||||||
|
|
@ -418,6 +433,19 @@ function initServerSideDataTable() {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ type: "date-eu", targets: 1 }, // Date de Création (colonne 1)
|
{ type: "date-eu", targets: 1 }, // Date de Création (colonne 1)
|
||||||
|
{
|
||||||
|
// Appliquer la classe nc-value aux cellules contenant "NC"
|
||||||
|
targets: "_all",
|
||||||
|
createdCell: function (td, cellData, rowData, row, col) {
|
||||||
|
// Exclure la première colonne (bouton détails) et les deux dernières (boutons)
|
||||||
|
if (col !== 0 && col < rowData.length - 2) {
|
||||||
|
const cellText = String(cellData || "").trim();
|
||||||
|
if (cellText === "NC") {
|
||||||
|
td.classList.add("nc-value");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{ responsivePriority: 1, targets: -1 },
|
{ responsivePriority: 1, targets: -1 },
|
||||||
{ responsivePriority: 2, targets: -2 }
|
{ responsivePriority: 2, targets: -2 }
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -33,8 +33,12 @@ function buildPocketBaseFilterAndSort({ regions = [], search = { value: "" }, co
|
||||||
|| contrat.type ~ "${esc}"
|
|| contrat.type ~ "${esc}"
|
||||||
|| contrat.intermediaire.nom ~ "${esc}"
|
|| contrat.intermediaire.nom ~ "${esc}"
|
||||||
|| contrat.intermediaire.numPortefeuille ~ "${esc}"
|
|| contrat.intermediaire.numPortefeuille ~ "${esc}"
|
||||||
|
|| contrat.client.nom ~ "${esc}"
|
||||||
|
|| contrat.client.numClient ~ "${esc}"
|
||||||
|| dernierUtilisateur.prenom ~ "${esc}"
|
|| dernierUtilisateur.prenom ~ "${esc}"
|
||||||
|| dernierUtilisateur.nom ~ "${esc}"
|
|| dernierUtilisateur.nom ~ "${esc}"
|
||||||
|
|| dernierUtilisateur.matricule ~ "${esc}"
|
||||||
|
|| dernierUtilisateur.region.nom ~ "${esc}"
|
||||||
)`);
|
)`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue