{"id":124647,"date":"2022-11-16T17:39:15","date_gmt":"2022-11-16T16:39:15","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-filter-columns-in-a-data-list\/"},"modified":"2025-02-03T16:44:49","modified_gmt":"2025-02-03T15:44:49","slug":"how-to-create-a-filter-columns-in-a-data-list","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/how-to-filter-columns-data-list","title":{"rendered":"Comment filtrer les colonnes d&rsquo;une liste de donn\u00e9es"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Dans cet exemple, vous apprendrez \u00e0 utiliser la fonction filter pour filtrer les valeurs d&rsquo;une liste de donn\u00e9es \u00e0 l&rsquo;aide d&rsquo;une liste de s\u00e9lection dans l&rsquo;en-t\u00eate.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73228195\/index.html\" width=\"820px\" height=\"420px\" frameborder=\"0\"><\/iframe><\/p>\n<p>Voici comment le construire :<\/p>\n<h3><strong>Voir<\/strong><\/h3>\n<ul>\n<li>Allez dans la palette Ma\u00eetrise des donn\u00e9es et cr\u00e9ez une nouvelle \u00ab\u00a0Ma\u00eetrise des donn\u00e9es\u00a0\u00bb, nommez-la \u00ab\u00a0Voitures\u00a0\u00bb, cr\u00e9ez trois attributs : \u00ab\u00a0Constructeur\u00a0\u00bb, \u00ab\u00a0Ann\u00e9e\u00a0\u00bb et \u00ab\u00a0Couleur\u00a0\u00bb, puis appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-1.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>Cliquez avec le bouton droit de la souris sur la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous venez de cr\u00e9er et s\u00e9lectionnez \u00ab\u00a0Afficher et modifier les enregistrements\u00a0\u00bb, \u00e9crivez vos exemples de voitures \u00e0 cet endroit et appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-2.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>S\u00e9lectionnez \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb et placez-la sur le canevas ; la fen\u00eatre \u00ab\u00a0Nouvelle liste de donn\u00e9es\u00a0\u00bb sera activ\u00e9e ; donnez un nom \u00e0 votre liste, choisissez ensuite la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment et s\u00e9lectionnez tous les attributs.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.png\" alt=\"Cr\u00e9er une liste de donn\u00e9es\">Cr\u00e9er une liste de donn\u00e9es<\/source><\/video><\/li>\n<\/ul>\n<ul>\n<li>Placez une \u00ab\u00a0S\u00e9lection\u00a0\u00bb de la section \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb dans l&rsquo;en-t\u00eate de la colonne que vous souhaitez filtrer ; appuyez sur la touche commande (Mac) ou contr\u00f4le (Windows) tout en faisant glisser l&rsquo;\u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.png\" alt=\"Ins\u00e9rer une s\u00e9lection\">Ins\u00e9rer une s\u00e9lection<\/source><\/video><\/li>\n<li>Cliquez sur \u00ab\u00a0S\u00e9lectionner\u00a0\u00bb et modifiez les valeurs de la palette de propri\u00e9t\u00e9s pour qu&rsquo;elles correspondent \u00e0 l&rsquo;option que vous avez dans votre colonne.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-5.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<\/ul>\n<h3><strong>Ev\u00e9nements<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Une fois la \u00ab\u00a0S\u00e9lection\u00a0\u00bb s\u00e9lectionn\u00e9e, acc\u00e9dez \u00e0 la palette des \u00e9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-6.png\" alt=\"\" width=\"794\" height=\"340\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb dans la bo\u00eete de dialogue et s\u00e9lectionnez \u00ab\u00a0on Change\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Attribuer une valeur \u00e0 un \u00e9l\u00e9ment\u00a0\u00bb et cliquez sur la \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb pour la valeur et cliquez sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-7.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Dans le premier champ du constructeur de l&rsquo;expression de la valeur, faites glisser la fonction \u00ab\u00a0Filtre\u00a0\u00bb et s\u00e9lectionnez votre \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb dans l&rsquo;onglet Base de donn\u00e9es pour le deuxi\u00e8me champ. Ensuite, tirez la fonction \u00ab\u00a0Has\u00a0\u00bb et choisissez la zone que vous allez filtrer \u00e0 partir de l&rsquo;onglet Data Masters ; ensuite, tirez la fonction \u00ab\u00a0Select\u00a0\u00bb et placez-la dans le dernier champ. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de votre \u00e9v\u00e9nement.  <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767991222\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<div> <strong> Remarque : <\/strong>Vous pouvez reproduire les actions pour chaque colonne que vous souhaitez filtrer.<\/div>\n<p><span style=\"font-weight: 400;\">Simulez votre prototype.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet exemple, vous apprendrez \u00e0 utiliser la fonction filter pour filtrer les valeurs d&rsquo;une liste de donn\u00e9es \u00e0 l&rsquo;aide d&rsquo;une liste de s\u00e9lection dans l&rsquo;en-t\u00eate&#8230;.<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8426,8428],"tags":[],"class_list":["post-124647","post","type-post","status-publish","format-standard","hentry","category-comment-faire","category-formulaires-et-donnees-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124647"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124647"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124647\/revisions"}],"predecessor-version":[{"id":126204,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124647\/revisions\/126204"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}