J'utilise dataTable strong> plugin pour montrer des lignes dans le tableau. Je veux montrer des lignes en double de la même couleur.
Comment je peux faire ce que quelqu'un pls m'aider.
Dans l'exemple ci-dessous winters noirs em> nous avons une ligne dupliquée.
Je veux montrer ce type de lignes en double dans différentes couleurs.
Comme si j'ai des données en double p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>
5 Réponses :
Il y a l'option mise à jour: p> créatedrow code> sur DataTable. Vous pouvez vérifier la condition à l'intérieur de cette option et ajouter le désir CSS. créérow code> avec initcomplete code> et une certaine logique le faire pour des données dynamiques. Je modifie la réponse après commentaire. p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>
Ici, vous utilisez un nom personnalisé pour vérifier, mais dans mon projet, je mets environ 1000 rangs de serveur. Dans ce cas, comment nous pouvons faire ce même processus. @Shree
Tard dans la partie mais Mettre à jour la réponse pour les données dynamiques :)
Tout d'abord, vous devez vérifier quels éléments sont des duplicats et vous devez gérer son statut dans un autre tableau. Donc, dans https://jsfiddle.net/t2cn571z/ p> Essayez en dessous de la solution. p> p> CareDrow code> Vous pouvez vérifier les lignes en double.
Vérifiez sur le lien ci-dessous.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>
Vous pouvez mettre en œuvre cela en utilisant
à l'aide de .map ( ) Méthode de matrice, dans la méthode de la carte, vous devez simplement ajouter une nouvelle clé avec la valeur de couleur basée sur la condition si la ligne dupliquée est supérieure à une valeur supérieure à 1, puis de la couleur sera Maintenant besoin d'utiliser Caredrow () Méthode pour la table de données. p> li>
ol> P> orange code> sinon "rouge" . P> li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>
Vous pouvez utiliser le code ci-dessous où vous pouvez préparer la carte des lignes en double à l'intérieur de la fonction "Rowcallback" et appliquer la couleur des lignes de dupliate de la fonction ApplyDuplicCateWColor une fois que DataTable Drawing est terminé
J'ai utilisé p> DuplicateColor Code > Array Pour choisir une couleur aléatoire pour les mêmes lignes, vous pouvez le modifier et ajouter plus de couleurs. Utilisant également duplicatecolorindex code> pour obtenir la prochaine couleur en double pour les prochaines données en double, assurez-vous de disposer de suffisamment de couleurs dans le tableau, sinon elle affichera une erreur arrayindexoutofbound. p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>
Un peu désordonné mais cela fait ce dont vous avez besoin surtout. Pour une couleur unique pour chaque ensemble de données différentes, vous aurez besoin de créer une variable de couleur aléatoire et de mettre cela sur la ligne au lieu d'une classe comme je l'ai fait. Ce n'est pas très extensible, mais si vous savez combien de colonnes, cela fonctionne bien.
bonne chance. P>
p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>
Vous envisagez donc une ligne unique uniquement sur la propriété de nom de nom ou une rangée entière devrait être unique?