List vue php

ShopBundle/Controller/Backend/AdminController.php

 use FOS\UserBundle\Model\UserManagerInterface;
 use Lc\ShopBundle\Context\FilterMultipleMerchantsInterface;
 use Lc\ShopBundle\Context\MerchantInterface;
-use Lc\ShopBundle\Context\MerchantUtilsInterface;
-use Lc\ShopBundle\Context\OrderUtilsInterface;
 use Lc\ShopBundle\Context\ReminderInterface;
 use Lc\ShopBundle\Context\SeoInterface;
 use Lc\ShopBundle\Context\StatusInterface;
 use Lc\ShopBundle\Context\TreeInterface;
 use Lc\ShopBundle\Form\Backend\Common\AbstractEditPositionType;
-use Lc\ShopBundle\Services\Utils;
+use Lc\ShopBundle\Form\Backend\Filters\ListFilterType;
 use Lc\ShopBundle\Services\UtilsManager;
 use Mailjet\MailjetSwiftMailer\SwiftMailer\MailjetTransport;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
         protected $mailjetTransport;
         protected $orderUtils;
         protected $translator;
+        protected $filtersForm = null;
 
         public function __construct(Security $security, UserManagerInterface $userManager, EntityManagerInterface $em,
                                     MailjetTransport $mailjetTransport, UtilsManager $utilsManager, TranslatorInterface $translator)
                 $this->mailjetTransport = $mailjetTransport;
                 $this->utils = $utilsManager->getUtils();
                 $this->merchantUtils = $utilsManager->getMerchantUtils();
-                $this->orderUtils =  $utilsManager->getOrderUtils() ;;
+                $this->orderUtils = $utilsManager->getOrderUtils();;
                 $this->translator = $translator;
         }
 
         /**
          * Réécriture de show action pr rediriger vers l'édition
          */
-/*        public function showAction()
-        {
-                $id = $this->request->query->get('id');
-                $entity = $this->request->query->get('entity');
+        /*        public function showAction()
+                {
+                        $id = $this->request->query->get('id');
+                        $entity = $this->request->query->get('entity');
 
-                return $this->redirectToRoute('easyadmin', [
-                        'action' => 'edit',
-                        'entity' => $entity,
-                        'id' => $id
-                ]);
-        }*/
+                        return $this->redirectToRoute('easyadmin', [
+                                'action' => 'edit',
+                                'entity' => $entity,
+                                'id' => $id
+                        ]);
+                }*/
 
 
         /**
                 $dqlFilter = $this->commonDqlFilterQueryBuilder($entityClass, $dqlFilter);
                 $queryBuilder = parent::createSearchQueryBuilder($entityClass, $searchQuery, $searchableFields, $sortField, $sortDirection, $dqlFilter);
                 $this->commonQueryFilter($entityClass, $queryBuilder);
+
                 return $queryBuilder;
         }
 
                 $dqlFilter = $this->commonDqlFilterQueryBuilder($entityClass, $dqlFilter);
                 $queryBuilder = parent::createListQueryBuilder($entityClass, $sortDirection, $sortField, $dqlFilter);
                 $this->commonQueryFilter($entityClass, $queryBuilder);
+
+                $listFields = $this->entity['list']['fields'];
+                $this->filtersForm = $this->createForm(ListFilterType::class, null, array(
+                        'fields' => $listFields,
+                        'method' => 'get'
+                ));
+                $this->filtersForm->handleRequest($this->request);
+
+                if ($this->filtersForm->isSubmitted() && $this->filtersForm->isValid()) {
+                        foreach ($listFields as $field) {
+                                if ($this->filtersForm->has($field['property'])) {
+                                        switch ($field['dataType']) {
+                                                case 'integer':
+                                                case 'text':
+                                                case 'string':
+                                                case 'toggle':
+                                                        $filter = $this->filtersForm->get($field['property'])->getData();
+                                                        if ($filter !== null) {
+
+                                                                $queryBuilder->andWhere('entity.' . $field['property'] . ' LIKE :' . $field['property'] . '');
+                                                                $queryBuilder->setParameter($field['property'], '%' . $filter . '%');
+                                                        }
+                                                        break;
+                                                case 'association' :
+                                                        $filter = $this->filtersForm->get($field['property'])->getData();
+                                                        if ($filter !== null) {
+                                                                if ($field['type_options']['multiple']) {
+                                                                        $queryBuilder->andWhere(':' . $field['property'] . ' MEMBER OF entity.' . $field['property'] . '');
+                                                                } else {
+                                                                        $queryBuilder->andWhere('entity.' . $field['property'] . ' = :' . $field['property'] . '');
+                                                                }
+                                                                $queryBuilder->setParameter($field['property'], $filter);
+                                                        }
+                                                        break;
+                                                case 'datetime':
+                                                case 'date':
+                                                        $dateStart = $this->filtersForm->get($field['property'])->get('dateStart')->getData();
+                                                        $dateEnd = $this->filtersForm->get($field['property'])->get('dateEnd')->getData();
+
+
+                                                        if ($dateStart) $queryBuilder->andWhere('entity.' . $field['property'] . ' >= :dateStart')->setParameter('dateStart', $dateStart);
+                                                        if ($dateEnd) $queryBuilder->andWhere('entity.' . $field['property'] . ' <= :dateEnd')->setParameter('dateEnd', $dateEnd);
+
+                                        }
+
+
+                                }
+                        }
+                }
+
                 return $queryBuilder;
         }
 
                 $reminderRepo = $this->em->getRepository(ReminderInterface::class);
                 $easyadmin = $this->request->attributes->get('easyadmin');
                 $entityName = $easyadmin['entity']['name'];
-                $id=null;
-                if($easyadmin['item'])$id = $easyadmin['item']->getId();
+                $id = null;
+                if ($easyadmin['item']) $id = $easyadmin['item']->getId();
+
+                $reminders = array('reminders' => $reminderRepo->findByEasyAdminConfig($actionName, $entityName, $id));
+
+                if ($actionName == 'list') {
+                        if ($this->filtersForm === null) {
+                                $options['fields'] = $parameters['fields'];
+                                $options['method'] = 'get';
+                                $this->filtersForm = $this->createForm(ListFilterType::class, null, $options);
+                        }
+                        $parameters = array_merge(
+                                $parameters,
+                                array(
+                                        'filters_form' => $this->filtersForm->createView()
+                                )
+                        );
+                }
 
-                $reminders = array('reminders' => $reminderRepo->findByEasyAdminConfig($actionName, $entityName, $id ));
 
                 $parameters = array_merge(
                         $parameters,
 
                 if ($entity instanceof SeoInterface) {
                         $formBuilder->add('metaTitle', TextType::class, array(
-                                'required' => false,
-                                'translation_domain' => 'lcshop'
-                        )
+                                        'required' => false,
+                                        'translation_domain' => 'lcshop'
+                                )
                         );
                         $formBuilder->add('metaDescription', TextareaType::class, array(
                                         'required' => false,

ShopBundle/Controller/Backend/ProductFamilyController.php

                         $this->dispatch(EasyAdminEvents::POST_UPDATE, ['entity' => $entity]);
 
                         $this->utils->addFlash('success', 'Produit sauvegardé') ;
-                        return $this->redirectToRoute('easyadmin', ['entity' => 'ProductFamily', 'action' => 'edit', 'id' => $id]) ;
+                        return $this->redirectToReferrer();
+
+                        //return $this->redirectToRoute('easyadmin', ['entity' => 'ProductFamily', 'action' => 'edit', 'id' => $id]) ;
                 }
 
                 $this->dispatch(EasyAdminEvents::POST_EDIT);

ShopBundle/EventSubscriber/ListEventSubscriber.php

                                 }
                         }
                 }
+                $paginator->nbResultsTotal = $entityRepo->count(array());
+
         }
 }

ShopBundle/Form/Backend/Filters/ListFilterType.php

+<?php
+
+namespace Lc\ShopBundle\Form\Backend\Filters;
+
+use Doctrine\ORM\EntityManagerInterface;
+use Doctrine\ORM\EntityRepository;
+use Symfony\Bridge\Doctrine\Form\Type\EntityType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
+use Symfony\Component\Form\Extension\Core\Type\DateType;
+use Symfony\Component\Form\Extension\Core\Type\FormType;
+use Symfony\Component\Form\Extension\Core\Type\IntegerType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+
+class ListFilterType extends AbstractType
+{
+        protected $em;
+
+        public function __construct(EntityManagerInterface $entityManager)
+        {
+                $this->em = $entityManager;
+        }
+
+        public function buildForm(FormBuilderInterface $builder, array $options)
+        {
+
+                foreach ($options['fields'] as $field) {
+
+                        switch ($field['dataType']) {
+                                case 'integer':
+                                        $builder->add($field['property'], TextType::class, array(
+                                                'required' => false
+                                        ));
+                                        break;
+                                case 'string':
+                                        $builder->add($field['property'], TextType::class, array(
+                                                'required' => false
+                                        ));
+                                        break;
+                                case 'toggle':
+                                        $builder->add($field['property'], ChoiceType::class, array(
+                                                'choices'=> array(
+                                                        'Oui' => 1,
+                                                        'Non' => 0,
+                                                ),
+                                                'placeholder'=> '--',
+                                                'required'=>false
+                                        ));
+                                        break;
+                                case 'datetime':
+                                case 'date':
+                                        $builder->add(
+                                                $builder->create($field['property'], FormType::class, array('inherit_data' => true))
+                                                ->add('dateStart', DateType::class, array(
+                                                        'widget' => 'single_text',
+                                                        'required' => false,
+                                                ))
+                                                ->add('dateEnd', DateType::class, array(
+                                                        'widget' => 'single_text',
+                                                        'required' => false,
+                                                ))
+                                        );
+                                        break;
+                                case 'association':
+                                        $classImplements = class_implements($field['targetEntity']);
+                                        $builder->add($field['property'], EntityType::class, array(
+                                                'class' => $field['targetEntity'],
+                                                'placeholder'=> '--',
+                                                'query_builder' => function (EntityRepository $repo) use ($classImplements) {
+                                                        if (in_array('Lc\ShopBundle\Context\FilterMerchantInterface', $classImplements)) {
+                                                                return $repo->findByMerchantQuery();
+                                                        }else{
+                                                                return $repo->createQueryBuilder('entity');
+                                                        }
+
+                                                },
+                                                'required' => false,
+
+                                        ));
+                                        break;
+                                case 'dateinterval':
+
+                                        break;
+                                case 'float':
+
+                                        break;
+                        }
+
+
+                }
+                /*                $builder
+                                        ->add('title', TextType::class, [
+                                                'label' => 'Titre',
+                                                'required' => false,
+                                        ])
+                                        ->add('behaviorTaxRate', BehaviorTaxRateType::class)
+                                        ->add('unit', UnitType::class)
+                                        ->add('value', ValueType::class)
+                                        ->add('permanent', PermanentType::class)
+                                        ->add('dateStart', DateStartType::class)
+                                        ->add('dateEnd', DateEndType::class)
+                                        ->add('users', UsersFilterType::class)
+                                        ->add('groupUsers', GroupUsersFilterType::class);*/
+        }
+
+        public function configureOptions(OptionsResolver $resolver)
+        {
+                $resolver->setDefaults([
+                        'label' => false,
+                        'translation_domain' => 'lcshop',
+                        'fields' => false
+                ]);
+        }
+}

ShopBundle/Resources/config/easy_admin/base.yaml

     design:
         templates:
             list: '@LcShop/backend/default/list.html.twig'
+            #list: '@LcShop/backend/default/list-datatable.html.twig'
             layout: '@LcShop/backend/default/layout/layout.html.twig'
             menu:  '@LcShop/backend/default/menu.html.twig'
             edit:  '@LcShop/backend/default/edit.html.twig'

ShopBundle/Resources/public/css/backend/adminlte/adminlte.css

 .card-body.p-0 .table thead > tr > td:first-of-type,
 .card-body.p-0 .table tbody > tr > th:first-of-type,
 .card-body.p-0 .table tbody > tr > td:first-of-type {
-  padding-left: 1.5rem;
+  padding-left: 1rem;
 }
 /* line 69, ../../../sass/backend/adminlte/_table.scss */
 .card-body.p-0 .table thead > tr > th:last-of-type,
 .card-body.p-0 .table thead > tr > td:last-of-type,
 .card-body.p-0 .table tbody > tr > th:last-of-type,
 .card-body.p-0 .table tbody > tr > td:last-of-type {
-  padding-right: 1.5rem;
+  padding-right: 0.5rem;
 }
 
 /* line 6, ../../../sass/backend/adminlte/_carousel.scss */

ShopBundle/Resources/public/css/backend/custom.css

 }
 
 /* line 55, ../../sass/backend/custom.scss */
+.card-body table.lc-table-list th.sorted, table th.sorting_asc, table th.sorting_desc {
+  border-top: 2px solid var(--success);
+}
+
+/*.card-body table.lc-table-list th{border-top:3px solid var(--success);}*/
+/* line 57, ../../sass/backend/custom.scss */
 table th.filtered {
   border-top: 3px solid var(--primary);
 }
 
-/* line 57, ../../sass/backend/custom.scss */
-td.actions {
+/* line 60, ../../sass/backend/custom.scss */
+.lc-table-list thead a {
+  color: #212529;
+}
+
+/* line 61, ../../sass/backend/custom.scss */
+.table-filters-line th {
+  font-weight: 400;
+}
+
+/* line 62, ../../sass/backend/custom.scss */
+#list_filter_id {
+  width: 60px;
+}
+
+/* line 63, ../../sass/backend/custom.scss */
+.lc-table-list .date-range {
+  width: 130px;
+}
+
+/* line 65, ../../sass/backend/custom.scss */
+th.actions, td.actions {
   white-space: nowrap;
   text-align: right;
 }
 
-/* line 59, ../../sass/backend/custom.scss */
+/* line 67, ../../sass/backend/custom.scss */
 .table td, .table th {
   padding: 0.35rem;
 }
 
-/* line 60, ../../sass/backend/custom.scss */
+/* line 68, ../../sass/backend/custom.scss */
 .delivery-field .form-group {
   display: inline-block;
   margin-bottom: 0px;
   margin-right: 15px;
 }
 
-/* line 61, ../../sass/backend/custom.scss */
+/* line 69, ../../sass/backend/custom.scss */
 .delivery-field .form-group .form-control {
   width: 150px;
 }
 
-/* line 63, ../../sass/backend/custom.scss */
+/* line 71, ../../sass/backend/custom.scss */
 table th input {
   width: auto;
 }
 
-/* line 64, ../../sass/backend/custom.scss */
+/* line 72, ../../sass/backend/custom.scss */
 table th .select2-container--default .select2-selection--single {
   padding: 0.3rem 0.4rem;
 }
 
 /************************  LOGIN PAGE *********************/
-/* line 67, ../../sass/backend/custom.scss */
+/* line 75, ../../sass/backend/custom.scss */
 .login-logo {
   display: block;
   margin: auto;
 }
 
 /************************  form error *********************/
-/* line 70, ../../sass/backend/custom.scss */
+/* line 78, ../../sass/backend/custom.scss */
 .form-sent .form-control:invalid {
   border-color: #dc3545;
   padding-right: 2.25rem;
   background-size: calc(.75em + .375rem) calc(.75em + .375rem);
 }
 
-/* line 71, ../../sass/backend/custom.scss */
+/* line 79, ../../sass/backend/custom.scss */
 .form-sent select.form-control:invalid + .select2 .select2-selection {
   border-color: #dc3545;
 }
 
-/* line 72, ../../sass/backend/custom.scss */
+/* line 80, ../../sass/backend/custom.scss */
 .form-sent select.form-control:invalid + .select2 .select2-selection b {
   border-color: #dc3545 transparent transparent transparent;
 }
 
 /*CUSTOM Checkbox
  /* Customize the label (the container) */
-/* line 77, ../../sass/backend/custom.scss */
+/* line 85, ../../sass/backend/custom.scss */
 .form-check-label {
   display: block;
   position: relative;
 }
 
 /* Hide the browser's default checkbox */
-/* line 79, ../../sass/backend/custom.scss */
+/* line 87, ../../sass/backend/custom.scss */
 .form-check-label input {
   position: absolute;
   opacity: 0;
 }
 
 /* Create a custom checkbox */
-/* line 82, ../../sass/backend/custom.scss */
+/* line 90, ../../sass/backend/custom.scss */
 .form-check {
   padding-left: 0px;
 }
 
-/* line 84, ../../sass/backend/custom.scss */
+/* line 92, ../../sass/backend/custom.scss */
 .form-sent .form-check-label input:invalid ~ .checkmark {
   border-color: #dc3545;
 }
 
-/* line 85, ../../sass/backend/custom.scss */
+/* line 93, ../../sass/backend/custom.scss */
 .form-check-label input:disabled ~ .checkmark {
   display: none;
 }
 
-/* line 86, ../../sass/backend/custom.scss */
+/* line 94, ../../sass/backend/custom.scss */
 .form-check-label input ~ .checkmark {
   position: absolute;
   top: 0;
   border: 1px solid var(--primary);
 }
 
-/* line 87, ../../sass/backend/custom.scss */
+/* line 95, ../../sass/backend/custom.scss */
 .form-check-label.big input ~ .checkmark {
   height: 21px;
   width: 21px;
 }
 
-/* line 88, ../../sass/backend/custom.scss */
+/* line 96, ../../sass/backend/custom.scss */
 .form-check-label input[type="checkbox"] ~ .checkmark {
   top: 2px;
 }
 
-/* line 89, ../../sass/backend/custom.scss */
+/* line 97, ../../sass/backend/custom.scss */
 .form-check-label input[type="radio"] ~ .checkmark {
   top: 3px;
   border-radius: 50%;
 }
 
-/* line 90, ../../sass/backend/custom.scss */
+/* line 98, ../../sass/backend/custom.scss */
 .form-check-label:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
 /* When the checkbox is checked, add a blue background */
-/* line 92, ../../sass/backend/custom.scss */
+/* line 100, ../../sass/backend/custom.scss */
 .form-check-label input:checked ~ .checkmark {
   background-color: var(--primary);
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
-/* line 94, ../../sass/backend/custom.scss */
+/* line 102, ../../sass/backend/custom.scss */
 .form-check-label .checkmark:after {
   content: "";
   position: absolute;
 }
 
 /* Show the checkmark when checked */
-/* line 96, ../../sass/backend/custom.scss */
+/* line 104, ../../sass/backend/custom.scss */
 .form-check-label input:checked ~ .checkmark:after {
   display: block;
 }
 
 /* Style the checkmark/indicator */
-/* line 98, ../../sass/backend/custom.scss */
+/* line 106, ../../sass/backend/custom.scss */
 .form-check-label .checkmark:after {
   left: 7px;
   top: 3px;
   transform: rotate(45deg);
 }
 
-/* line 99, ../../sass/backend/custom.scss */
+/* line 107, ../../sass/backend/custom.scss */
 .form-check-label input[type="checkbox"] ~ .checkmark:after {
   left: 6px;
   top: 2px;
   transform: rotate(45deg);
 }
 
-/* line 100, ../../sass/backend/custom.scss */
+/* line 108, ../../sass/backend/custom.scss */
 .form-check-label input[type="radio"] ~ .checkmark:after {
   top: 4px;
   left: 4px;
   background: white;
 }
 
-/* line 102, ../../sass/backend/custom.scss */
+/* line 110, ../../sass/backend/custom.scss */
 .form-check-label.big input[type="checkbox"] ~ .checkmark:after {
   left: 7px;
   top: 3px;
 }
 
 /* Create a custom radio button */
-/* line 106, ../../sass/backend/custom.scss */
+/* line 114, ../../sass/backend/custom.scss */
 .product-categories .parent .form-group.field-checkbox .form-check-label {
   padding-left: 0px;
   font-style: italic;
 }
 
-/* line 107, ../../sass/backend/custom.scss */
+/* line 115, ../../sass/backend/custom.scss */
 .product-categories .children .form-group.field-checkbox {
   margin-left: 20px;
 }
 
-/* line 108, ../../sass/backend/custom.scss */
+/* line 116, ../../sass/backend/custom.scss */
 .product-categories .form-group {
   margin-bottom: 0.15rem;
 }
 
-/* line 109, ../../sass/backend/custom.scss */
+/* line 117, ../../sass/backend/custom.scss */
 .lc-deleted-field {
   display: none;
 }
 
-/* line 110, ../../sass/backend/custom.scss */
+/* line 118, ../../sass/backend/custom.scss */
 .lc-offline-field {
   opacity: 0.5;
 }
 
-/* line 111, ../../sass/backend/custom.scss */
+/* line 119, ../../sass/backend/custom.scss */
 .lc-offline-field label::after {
   content: ' [hors ligne]';
 }
 
 /* Général */
-/* line 117, ../../sass/backend/custom.scss */
+/* line 125, ../../sass/backend/custom.scss */
 .btn.btn-primary.action-save {
   float: right;
 }
 
-/* line 118, ../../sass/backend/custom.scss */
+/* line 126, ../../sass/backend/custom.scss */
 .button-action a.float-right {
   margin-left: 10px;
 }
 
-/* line 120, ../../sass/backend/custom.scss */
+/* line 128, ../../sass/backend/custom.scss */
 .input-group-text {
   padding: 0.25rem 0.75rem;
 }
 
-/* line 124, ../../sass/backend/custom.scss */
+/* line 132, ../../sass/backend/custom.scss */
 .col-form-label {
   font-weight: bold;
 }
 
-/* line 126, ../../sass/backend/custom.scss */
+/* line 134, ../../sass/backend/custom.scss */
 #toast-container.toast-top-right {
   top: 60px;
 }
 
 /* SIDEBAR */
-/* line 129, ../../sass/backend/custom.scss */
+/* line 137, ../../sass/backend/custom.scss */
 .main-header.navbar {
   padding: 0;
   min-height: 57px;
 }
 
-/* line 130, ../../sass/backend/custom.scss */
+/* line 138, ../../sass/backend/custom.scss */
 .lc-navbar li {
   border-left: 1px solid #e0e0e0;
   padding: 0.5rem 1.5rem;
 }
 
-/* line 131, ../../sass/backend/custom.scss */
+/* line 139, ../../sass/backend/custom.scss */
 .lc-navbar li label {
   margin-bottom: 0;
   vertical-align: middle;
   font-weight: normal !important;
 }
 
-/* line 133, ../../sass/backend/custom.scss */
+/* line 141, ../../sass/backend/custom.scss */
 #switch-merchant {
   min-width: 170px;
 }
 
 /* Sortable */
-/* line 139, ../../sass/backend/custom.scss */
+/* line 147, ../../sass/backend/custom.scss */
 .ui-sortable-helper {
   display: table;
 }
 
-/* line 140, ../../sass/backend/custom.scss */
+/* line 148, ../../sass/backend/custom.scss */
 .ui-state-highlight {
   background: #eee;
 }
 
-/* line 141, ../../sass/backend/custom.scss */
+/* line 149, ../../sass/backend/custom.scss */
 .lc-sortable div:last-child {
   display: none;
 }
 .lc-ckfinder-wrap .lc-ckfinder-button{width: 100%; bottom: 0px; left: 0; position: absolute;}
 */
 /* VUES JS  */
-/* line 156, ../../sass/backend/custom.scss */
+/* line 164, ../../sass/backend/custom.scss */
 .nav-item .btn {
   padding-right: 15px;
   position: relative;
 }
 
-/* line 157, ../../sass/backend/custom.scss */
+/* line 165, ../../sass/backend/custom.scss */
 .nav-item .btn .invalid-form {
   display: none;
   position: absolute;
   font-size: 1.2rem;
 }
 
-/* line 158, ../../sass/backend/custom.scss */
+/* line 166, ../../sass/backend/custom.scss */
 .nav-item.has-invalid .btn .invalid-form {
   display: inline-block;
   z-index: 2;
 }
 
 /* ProductFamily */
-/* line 163, ../../sass/backend/custom.scss */
+/* line 171, ../../sass/backend/custom.scss */
 .field-unit-quantity {
   border-bottom: 2px dotted #eee;
   padding-bottom: 10px;
   margin-bottom: 20px;
 }
 
-/* line 164, ../../sass/backend/custom.scss */
+/* line 172, ../../sass/backend/custom.scss */
 .field-reduction-apply {
   border-top: 2px dotted #eee;
   padding-top: 10px;
   margin-top: 20px;
 }
 
-/* line 166, ../../sass/backend/custom.scss */
+/* line 174, ../../sass/backend/custom.scss */
 .new-productfamily #nav-params,
 .edit-productfamily #nav-params {
   margin-bottom: 30px;
 }
 
-/* line 171, ../../sass/backend/custom.scss */
+/* line 179, ../../sass/backend/custom.scss */
 .new-productfamily #nav-params .btn,
 .edit-productfamily #nav-params .btn {
   margin-left: 20px;
 }
 
-/* line 176, ../../sass/backend/custom.scss */
+/* line 184, ../../sass/backend/custom.scss */
 .new-productfamily #product-categories .row,
 .edit-productfamily #product-categories .row {
   padding: 10px;
 }
 
-/* line 181, ../../sass/backend/custom.scss */
+/* line 189, ../../sass/backend/custom.scss */
 .new-productfamily #product-categories .form-group,
 .edit-productfamily #product-categories .form-group {
   width: 100%;
   padding: 4px;
 }
 
-/* line 187, ../../sass/backend/custom.scss */
+/* line 195, ../../sass/backend/custom.scss */
 .new-productfamily #product-categories .children,
 .edit-productfamily #product-categories .children {
   margin-left: 20px;
   width: 100%;
 }
 
-/* line 193, ../../sass/backend/custom.scss */
+/* line 201, ../../sass/backend/custom.scss */
 .new-productfamily ul.products,
 .edit-productfamily ul.products {
   padding: 0px;
   list-style-type: none;
 }
 
-/* line 199, ../../sass/backend/custom.scss */
+/* line 207, ../../sass/backend/custom.scss */
 .new-productfamily ul.products li.product,
 .edit-productfamily ul.products li.product {
   padding: 0px;
   position: relative;
 }
 
-/* line 206, ../../sass/backend/custom.scss */
+/* line 214, ../../sass/backend/custom.scss */
 .new-productfamily ul.products li.add,
 .edit-productfamily ul.products li.add {
   text-align: right;
 }
 
-/* line 211, ../../sass/backend/custom.scss */
+/* line 219, ../../sass/backend/custom.scss */
 .autoresize textarea {
   height: auto;
   min-height: 38px;
 }
 
 /* ORDER */
-/* line 217, ../../sass/backend/custom.scss */
+/* line 225, ../../sass/backend/custom.scss */
 .table-order-summary {
   width: 100%;
 }
 
-/* line 220, ../../sass/backend/custom.scss */
+/* line 228, ../../sass/backend/custom.scss */
 .order-product-item.redelivery {
   background: rgba(18, 104, 253, 0.38) !important;
 }
 /*.select2-container--bootstrap .select2-selection{max-width: none;}*/
 /*.order-product-item{margin: 15px 0; padding: 0;}*/
 /* Product */
-/* line 225, ../../sass/backend/custom.scss */
+/* line 233, ../../sass/backend/custom.scss */
 .product-form-modal {
   display: none;
 }
 
-/* line 226, ../../sass/backend/custom.scss */
+/* line 234, ../../sass/backend/custom.scss */
 .product-form.modal .form-check-label {
   font-style: italic;
   color: #666;
   text-align: left;
 }
 
-/* line 227, ../../sass/backend/custom.scss */
+/* line 235, ../../sass/backend/custom.scss */
 .products-collection-table .inherited {
   color: #888;
   font-style: italic;
   font-weight: initial;
 }
 
-/* line 228, ../../sass/backend/custom.scss */
+/* line 236, ../../sass/backend/custom.scss */
 .products-collection-table td {
   position: relative;
 }
 
-/* line 229, ../../sass/backend/custom.scss */
+/* line 237, ../../sass/backend/custom.scss */
 .card-body.p-0 .products-collection-table tbody > tr > td:first-of-type, .card-body.p-0 .products-collection-table tbody > tr > th:first-of-type, .card-body.p-0 .products-collection-table thead > tr > td:first-of-type, .card-body.p-0 .products-collection-table thead > tr > th:first-of-type {
   padding-left: 0.35rem;
 }
 
-/* line 230, ../../sass/backend/custom.scss */
+/* line 238, ../../sass/backend/custom.scss */
 .products-collection-table .btn-empty-field {
   position: absolute;
   right: 3px;
   padding: 0px;
 }
 
-/* line 231, ../../sass/backend/custom.scss */
+/* line 239, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table {
   table-layout: fixed;
 }
 
-/* line 232, ../../sass/backend/custom.scss */
+/* line 240, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table tr {
   border-bottom: 1px solid #dee2e6;
 }
 
-/* line 233, ../../sass/backend/custom.scss */
+/* line 241, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table th {
   font-size: 13px;
   border-left: 1px solid #dee2e6;
   text-align: center;
 }
 
-/* line 234, ../../sass/backend/custom.scss */
+/* line 242, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table th span {
   white-space: initial;
 }
 
-/* line 235, ../../sass/backend/custom.scss */
+/* line 243, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table th:last-child {
   border-right: 1px solid #dee2e6;
 }
 
-/* line 236, ../../sass/backend/custom.scss */
+/* line 244, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table td {
   border-left: 1px solid #dee2e6;
   text-align: center;
   font-size: 13px;
 }
 
-/* line 237, ../../sass/backend/custom.scss */
+/* line 245, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table td:last-child {
   border-right: 1px solid #dee2e6;
   white-space: nowrap;
 }
 
-/* line 238, ../../sass/backend/custom.scss */
+/* line 246, ../../sass/backend/custom.scss */
 #lc-product-family-edit .btn-add-product {
   margin: 20px 0;
   float: right;
 }
 
-/* line 239, ../../sass/backend/custom.scss */
+/* line 247, ../../sass/backend/custom.scss */
 #lc-product-family-edit .inherited {
   color: #888;
   font-style: italic;
   font-weight: initial;
 }
 
-/* line 240, ../../sass/backend/custom.scss */
+/* line 248, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table td .value {
   min-width: 80%;
   margin: auto;
   cursor: pointer;
 }
 
-/* line 241, ../../sass/backend/custom.scss */
+/* line 249, ../../sass/backend/custom.scss */
 #lc-product-family-edit .products-collection-table td .modal {
   text-align: left;
 }
 
 /* DeliveryZone */
-/* line 245, ../../sass/backend/custom.scss */
+/* line 253, ../../sass/backend/custom.scss */
 #autocomplete-cities {
   position: relative;
 }
 
-/* line 249, ../../sass/backend/custom.scss */
+/* line 257, ../../sass/backend/custom.scss */
 #autocomplete-cities .ui-autocomplete {
   left: 30%;
   top: 41px;
   margin-left: 18px;
 }
 
-/* line 255, ../../sass/backend/custom.scss */
+/* line 263, ../../sass/backend/custom.scss */
 .head-reminders {
   margin-top: 15px;
 }
 
 /* TABLEAU DE BORD */
-/* line 258, ../../sass/backend/custom.scss */
+/* line 266, ../../sass/backend/custom.scss */
 .todo-list > li {
   position: relative;
 }
 
-/* line 259, ../../sass/backend/custom.scss */
+/* line 267, ../../sass/backend/custom.scss */
 .todo-list > li .text {
   margin-left: 30px;
 }
 
-/* line 260, ../../sass/backend/custom.scss */
+/* line 268, ../../sass/backend/custom.scss */
 .todo-list > li .tools {
   position: absolute;
   top: 4px;
   right: 15px;
 }
 
-/* line 262, ../../sass/backend/custom.scss */
+/* line 270, ../../sass/backend/custom.scss */
 #addTicketMessageForm {
   margin-top: 30px;
   border-top: 2px dotted #eee;
   padding-top: 30px;
 }
 
-/* line 264, ../../sass/backend/custom.scss */
+/* line 272, ../../sass/backend/custom.scss */
 #dashboard .list-btn-statistic {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
-/* line 265, ../../sass/backend/custom.scss */
+/* line 273, ../../sass/backend/custom.scss */
 #dashboard .btn-statistic {
   width: 120px;
   height: 70px;
   line-height: 1rem;
 }
 
-/* line 266, ../../sass/backend/custom.scss */
+/* line 274, ../../sass/backend/custom.scss */
 #dashboard .btn-statistic small {
   margin-bottom: 10px;
   display: block;
 }
 
-/* line 267, ../../sass/backend/custom.scss */
+/* line 275, ../../sass/backend/custom.scss */
 #dashboard .btn-statistic .value {
   display: block;
 }

ShopBundle/Resources/public/js/backend/script/default/init-common.js

     })
 
     if ($('.select2, select.form-control').length) {
+
         $('form .form-widget>select.form-control, .select2').each(function (i, elm) {
             if (!$(this).hasClass('disable-select2')) {
                 setSelect2($(elm));
     });
 
 
-    $('.date-time-range').each(function (i, picker) {
-//log(moment('2020-04-05 20:00:00').format( "DD/MM/YYYY HH:mm"))
+    $('.date-time-range, .date-range').each(function (i, picker) {
         options = {
-            timePicker: true,
-            timePickerIncrement: 30,
-            timePicker24Hour: true,
+            autoUpdateInput: false,
             locale: {
-                "format": "DD/MM/YYYY HH:mm",
+                "format": "DD/MM/YY",
                 "separator": " - ",
                 "applyLabel": "Appliquer",
                 "cancelLabel": "Annuler",
                 "firstDay": 1
             }
         };
-
+        if ($(picker).hasClass('date-time-range')){
+            options = Object.assign(options, {
+                timePicker: true,
+                timePickerIncrement: 30,
+                timePicker24Hour: true,
+                locale: {
+                    "format": "DD/MM/YYYY HH:mm",
+                }
+            });
+        }
         if ($(picker).nextAll('.date-time-range-fields').find('.date-start').val()) {
             options.startDate = new Date($(picker).nextAll('.date-time-range-fields').find('.date-start').val());
+            options.autoUpdateInput = true;
         }
         if ($(picker).nextAll('.date-time-range-fields').find('.date-end').val()) {
             options.endDate = new Date($(picker).nextAll('.date-time-range-fields').find('.date-end').val());
+            options.autoUpdateInput = true;
         }
         $(picker).daterangepicker(options);
         $(picker).on('apply.daterangepicker', function (ev, pickerElm) {
-            log($(picker).nextAll('.date-time-range-fields').find('.date-start'));
-            log(pickerElm.startDate.format('YYYY-MM-DD HH:mm'));
-            $(picker).nextAll('.date-time-range-fields').find('.date-start').val(pickerElm.startDate.format('YYYY-MM-DD HH:mm'));
-            $(picker).nextAll('.date-time-range-fields').find('.date-end').val(pickerElm.endDate.format('YYYY-MM-DD HH:mm'));
+            if ($(picker).hasClass('date-time-range')) {
+                $(this).val(pickerElm.startDate.format('DD/MM/YY HH:mm') + ' - ' + pickerElm.endDate.format(options.locale.format));
+            }else{
+                $(this).val(pickerElm.startDate.format('DD/MM/YY') + ' - ' + pickerElm.endDate.format(options.locale.format));
+            }
+            if ($(picker).hasClass('date-time-range')) {
+                $(picker).nextAll('.date-time-range-fields').find('.date-start').val(pickerElm.startDate.format('YYYY-MM-DD HH:mm'));
+                $(picker).nextAll('.date-time-range-fields').find('.date-end').val(pickerElm.endDate.format('YYYY-MM-DD HH:mm'));
+            }else{
+                $(picker).nextAll('.date-time-range-fields').find('.date-start').val(pickerElm.startDate.format('YYYY-MM-DD'));
+                $(picker).nextAll('.date-time-range-fields').find('.date-end').val(pickerElm.endDate.format('YYYY-MM-DD'));
+            }
         });
     });
 
         $select.data('init', 'set')
         var options = {
             width: "100%",
+            theme: "bootstrap",
             dropdownAutoWidth: false,
             allowClear: true,
             minimumResultsForSearch: 8
 }
 
 
-
-function initBtnEditReminder(){
+function initBtnEditReminder() {
     $('.btn-edit-reminder, .btn-add-reminder ').on('click', function () {
         $btn = $(this);
         var url = $(this).data('url');
             dataType: "json",
             success: function (response) {
                 $('body').append(response.data);
-                if($btn.hasClass('btn-add-reminder')) {
+                if ($btn.hasClass('btn-add-reminder')) {
                     $('#reminder_entityName').val(getUrlParameter('entity'));
                     $('#reminder_entityId').val(getUrlParameter('id'));
                     $('#reminder_entityAction').val(getUrlParameter('action'));
 
     $('.checkbox-valid-reminder').on('change', function () {
         var url = $(this).data('url');
-        if($(this).is(':checked')){
-            url = url+'&done=true'
-        }else{
-            url = url+'&done=false'
+        if ($(this).is(':checked')) {
+            url = url + '&done=true'
+        } else {
+            url = url + '&done=false'
         }
         $.ajax({
             url: url,

ShopBundle/Resources/public/js/backend/script/default/init-list-datatable.js

+jQuery(document).ready(function () {
+    initDeleteAction();
+
+    initDataTable();
+
+
+alert('niche');
+});
+
+function initDeleteAction() {
+
+    $('.action-delete').each(function (){
+        $(this).on('click', function (e) {
+            e.preventDefault();
+            const id = $(this).parents('tr').first().data('id');
+
+            $('#modal-delete').modal({backdrop: true, keyboard: true})
+                .off('click', '#modal-delete-button')
+                .on('click', '#modal-delete-button', function () {
+                    let deleteForm = $('#delete-form');
+                    deleteForm.attr('action', deleteForm.attr('action').replace('__id__', id));
+                    deleteForm.trigger('submit');
+                });
+        });
+    });
+}
+
+
+function initDataTable() {
+    if ($(".table.datatable-simple").length > 0) {
+        //$(".table.datatable-simple thead tr").clone(true).appendTo( '.table.datatable-simple tfoot' );
+
+        $(".table.datatable-simple thead tr").clone(true).appendTo('.table.datatable-simple thead');
+        $(".table.datatable-simple thead tr:eq(1) th").each(function (i) {
+            if ($(this).data('searchable') == "input") {
+                var title = $(this).text();
+                var cssClass = '';
+                if ($(this).text().trim().toLowerCase() == 'id') cssClass = 'small'
+                $(this).html('<input type="text" placeholder="" class="datatable-field-search ' + cssClass + '" />');
+
+                $('input', this).on('keyup change', function () {
+                    if (this.value === "") {
+                        $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').removeClass('filtered')
+                    } else {
+                        $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').addClass('filtered')
+                    }
+                    if (table.column(i).search() !== this.value) {
+                        table
+                            .column(i)
+                            .search(this.value)
+                            .draw();
+                        var searchVal = this.value;
+                        var body = $(table.table().body());
+
+                        body.unhighlight();
+                        body.highlight(searchVal);
+                    }
+                });
+            }else if ($(this).data('searchable') == "date") {
+                   /* var title = $(this).text();
+
+                    $(this).html('<input type="date" class="datatable-field-date date-start" /> <input type="date" class="datatable-field-date date-end" /> ');
+
+                    $dateStart = $(this).find('.date-start');
+                    $dateEnd = $(this).find('.date-end');
+                    $('input', this).on('keyup change', function () {
+                        table.draw();
+                    });
+
+                    $.fn.dataTable.ext.search.push(
+                        function( settings, data, dataIndex ) {
+                            if($dateStart.val()!=="" || $dateEnd.val()!=="" ) {
+
+
+                                var dateStart = parseInt(Date.parse($dateStart.val()));
+                                var dateEnd = parseInt(Date.parse($dateEnd.val()));
+
+                                currentDate = parseInt($('td.date').eq(dataIndex).find('time').data('timestamp'));
+                                log(dateStart);
+                                log(currentDate);
+                                log($('td.date').eq(dataIndex));
+
+                                return true;
+                                if (((dateStart !== null && currentDate >= dateStart) || dateStart == null) && ((dateEnd !== null && dateEnd >= currentDate) || dateEnd == null)) {
+                                    return true;
+                                } else {
+                                    return false;
+                                }
+                            }else{
+                                return true;
+                            }
+                        }
+                    );*/
+
+
+                    /*$('input', this).on('keyup change', function () {
+                        if (this.value === "") {
+                            $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').removeClass('filtered')
+                        } else {
+                            $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').addClass('filtered')
+                        }
+                        if (table.column(i).search() !== this.value) {
+                            table
+                                .column(i)
+                                .search(this.value)
+                                .draw();
+                            var searchVal = this.value;
+                            var body = $( table.table().body() );
+
+                            body.unhighlight();
+                            body.highlight(searchVal);
+                        }
+                    });*/
+            } else if ($(this).data('searchable') == 'select' ){
+                $(this).html('<select  data-allow-clear="false"  class="list"><option value="all">Tout afficher</option></select>'); //LC_TRAD
+            } else if ($(this).data('searchable') == 'select-text') {
+                $(this).html('<select data-allow-clear="false" class="list-text"><option value="all">Tout afficher</option></select>'); //LC_TRAD
+            } else {
+                $(this).html('')
+            }
+        });
+
+        var table = $(".table.datatable-simple").DataTable({
+            orderCellsTop: true,
+            pageLength: 50,
+            fixedHeader: {
+                header: true,
+                headerOffset: $('.main-header').outerHeight(),
+            },
+            paging: true,
+            //responsive: true,
+            initComplete: function () {
+                this.api().columns().every( function (i) {
+                    var column = this;
+                    var select = false;
+                    if($('.table.datatable-simple thead tr:eq(1) th:eq('+i+') select.list-text').length) {
+                        select = $('.table.datatable-simple thead tr:eq(1) th:eq(' + i + ') select.list-text');
+                    }
+                    if(select.length) {
+                        column.data().unique().sort().each(function (d, j) {
+                            values = d.split('\n');
+                            for(k=0; k< values.length; k++) {
+                                val = values[k];
+                                select.append('<option value="' + val.trim() + '">' + val.trim() + '</option>')
+                            }
+                        });
+                    }
+                    if(!select) select = $('.table.datatable-simple thead tr:eq(1) th:eq('+i+') select.list')
+                    if(select.length) {
+                        column.data().unique().sort().each(function (d, j) {
+                            $(d).each(function (k, val) {
+
+                                select.append('<option value="' + $(val).text().trim() + '">' + $(val).text().trim() + '</option>')
+                            });
+                        });
+                        setSelect2(select);
+                        select.on( 'change', function () {
+                            var val = $(this).val();
+                            if(val=="all"){
+                                $('.table.datatable-simple thead tr:eq(0) th:eq('+i+')').removeClass('filtered')
+                                column.search('').draw();
+                            }else {
+                                $('.table.datatable-simple thead tr:eq(0) th:eq('+i+')').addClass('filtered')
+                                column.search(val, false).draw();
+                            }
+                        } );
+                    }
+                } );
+            },
+            language: {
+                "sEmptyTable":     "Aucune donnée disponible dans le tableau",
+                "sInfo":           "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
+                "sInfoEmpty":      "Affichage de l'élément 0 à 0 sur 0 élément",
+                "sInfoFiltered":   "(filtré à partir de _MAX_ éléments au total)",
+                "sInfoPostFix":    "",
+                "sInfoThousands":  ",",
+                "sLengthMenu":     "Afficher _MENU_ éléments",
+                "sLoadingRecords": "Chargement...",
+                "sProcessing":     "Traitement...",
+                "sSearch":         "Rechercher :",
+                "sZeroRecords":    "Aucun élément correspondant trouvé",
+                "oPaginate": {
+                    "sFirst":    "Premier",
+                    "sLast":     "Dernier",
+                    "sNext":     "Suivant",
+                    "sPrevious": "Précédent"
+                },
+                "oAria": {
+                    "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
+                    "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
+                },
+                "select": {
+                    "rows": {
+                        "_": "%d lignes sélectionnées",
+                        "0": "Aucune ligne sélectionnée",
+                        "1": "1 ligne sélectionnée"
+                    }
+                }
+            },
+        });
+    }
+}

ShopBundle/Resources/public/js/backend/script/default/init-list.js

 jQuery(document).ready(function () {
     initDeleteAction();
 
-    initDataTable();
-
-
-
+    initResetFilters();
 });
 
 function initDeleteAction() {
         });
     });
 }
-
-
-function initDataTable() {
-    if ($(".table.datatable-simple").length > 0) {
-        //$(".table.datatable-simple thead tr").clone(true).appendTo( '.table.datatable-simple tfoot' );
-
-        $(".table.datatable-simple thead tr").clone(true).appendTo('.table.datatable-simple thead');
-        $(".table.datatable-simple thead tr:eq(1) th").each(function (i) {
-            if ($(this).data('searchable') == "input") {
-                var title = $(this).text();
-                var cssClass = '';
-                if ($(this).text().trim().toLowerCase() == 'id') cssClass = 'small'
-                $(this).html('<input type="text" placeholder="" class="datatable-field-search ' + cssClass + '" />');
-
-                $('input', this).on('keyup change', function () {
-                    if (this.value === "") {
-                        $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').removeClass('filtered')
-                    } else {
-                        $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').addClass('filtered')
-                    }
-                    if (table.column(i).search() !== this.value) {
-                        table
-                            .column(i)
-                            .search(this.value)
-                            .draw();
-                        var searchVal = this.value;
-                        var body = $(table.table().body());
-
-                        body.unhighlight();
-                        body.highlight(searchVal);
-                    }
-                });
-            }else if ($(this).data('searchable') == "date") {
-                   /* var title = $(this).text();
-
-                    $(this).html('<input type="date" class="datatable-field-date date-start" /> <input type="date" class="datatable-field-date date-end" /> ');
-
-                    $dateStart = $(this).find('.date-start');
-                    $dateEnd = $(this).find('.date-end');
-                    $('input', this).on('keyup change', function () {
-                        table.draw();
-                    });
-
-                    $.fn.dataTable.ext.search.push(
-                        function( settings, data, dataIndex ) {
-                            if($dateStart.val()!=="" || $dateEnd.val()!=="" ) {
-
-
-                                var dateStart = parseInt(Date.parse($dateStart.val()));
-                                var dateEnd = parseInt(Date.parse($dateEnd.val()));
-
-                                currentDate = parseInt($('td.date').eq(dataIndex).find('time').data('timestamp'));
-                                log(dateStart);
-                                log(currentDate);
-                                log($('td.date').eq(dataIndex));
-
-                                return true;
-                                if (((dateStart !== null && currentDate >= dateStart) || dateStart == null) && ((dateEnd !== null && dateEnd >= currentDate) || dateEnd == null)) {
-                                    return true;
-                                } else {
-                                    return false;
-                                }
-                            }else{
-                                return true;
-                            }
-                        }
-                    );*/
-
-
-                    /*$('input', this).on('keyup change', function () {
-                        if (this.value === "") {
-                            $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').removeClass('filtered')
-                        } else {
-                            $('.table.datatable-simple thead tr:eq(0) th:eq(' + i + ')').addClass('filtered')
-                        }
-                        if (table.column(i).search() !== this.value) {
-                            table
-                                .column(i)
-                                .search(this.value)
-                                .draw();
-                            var searchVal = this.value;
-                            var body = $( table.table().body() );
-
-                            body.unhighlight();
-                            body.highlight(searchVal);
-                        }
-                    });*/
-            } else if ($(this).data('searchable') == 'select' ){
-                $(this).html('<select  data-allow-clear="false"  class="list"><option value="all">Tout afficher</option></select>'); //LC_TRAD
-            } else if ($(this).data('searchable') == 'select-text') {
-                $(this).html('<select data-allow-clear="false" class="list-text"><option value="all">Tout afficher</option></select>'); //LC_TRAD
-            } else {
-                $(this).html('')
-            }
-        });
-
-        var table = $(".table.datatable-simple").DataTable({
-            orderCellsTop: true,
-            pageLength: 50,
-            fixedHeader: {
-                header: true,
-                headerOffset: $('.main-header').outerHeight(),
-            },
-            paging: true,
-            //responsive: true,
-            initComplete: function () {
-                this.api().columns().every( function (i) {
-                    var column = this;
-                    var select = false;
-                    if($('.table.datatable-simple thead tr:eq(1) th:eq('+i+') select.list-text').length) {
-                        select = $('.table.datatable-simple thead tr:eq(1) th:eq(' + i + ') select.list-text');
-                    }
-                    if(select.length) {
-                        column.data().unique().sort().each(function (d, j) {
-                            values = d.split('\n');
-                            for(k=0; k< values.length; k++) {
-                                val = values[k];
-                                select.append('<option value="' + val.trim() + '">' + val.trim() + '</option>')
-                            }
-                        });
-                    }
-                    if(!select) select = $('.table.datatable-simple thead tr:eq(1) th:eq('+i+') select.list')
-                    if(select.length) {
-                        column.data().unique().sort().each(function (d, j) {
-                            $(d).each(function (k, val) {
-
-                                select.append('<option value="' + $(val).text().trim() + '">' + $(val).text().trim() + '</option>')
-                            });
-                        });
-                        setSelect2(select);
-                        select.on( 'change', function () {
-                            var val = $(this).val();
-                            if(val=="all"){
-                                $('.table.datatable-simple thead tr:eq(0) th:eq('+i+')').removeClass('filtered')
-                                column.search('').draw();
-                            }else {
-                                $('.table.datatable-simple thead tr:eq(0) th:eq('+i+')').addClass('filtered')
-                                column.search(val, false).draw();
-                            }
-                        } );
-                    }
-                } );
-            },
-            language: {
-                "sEmptyTable":     "Aucune donnée disponible dans le tableau",
-                "sInfo":           "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
-                "sInfoEmpty":      "Affichage de l'élément 0 à 0 sur 0 élément",
-                "sInfoFiltered":   "(filtré à partir de _MAX_ éléments au total)",
-                "sInfoPostFix":    "",
-                "sInfoThousands":  ",",
-                "sLengthMenu":     "Afficher _MENU_ éléments",
-                "sLoadingRecords": "Chargement...",
-                "sProcessing":     "Traitement...",
-                "sSearch":         "Rechercher :",
-                "sZeroRecords":    "Aucun élément correspondant trouvé",
-                "oPaginate": {
-                    "sFirst":    "Premier",
-                    "sLast":     "Dernier",
-                    "sNext":     "Suivant",
-                    "sPrevious": "Précédent"
-                },
-                "oAria": {
-                    "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
-                    "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
-                },
-                "select": {
-                    "rows": {
-                        "_": "%d lignes sélectionnées",
-                        "0": "Aucune ligne sélectionnée",
-                        "1": "1 ligne sélectionnée"
-                    }
-                }
-            },
-        });
-    }
-}

ShopBundle/Resources/public/sass/backend/adminlte/_table.scss

     tbody > tr > th,
     tbody > tr > td {
       &:first-of-type {
-        padding-left: map-get($spacers, 4);
+        padding-left: map-get($spacers, 3);
       }
 
       &:last-of-type {
-        padding-right: map-get($spacers, 4);
+        padding-right: map-get($spacers,2);
       }
     }
   }

ShopBundle/Resources/public/sass/backend/custom.scss

 
 table.fixedHeader-floating{margin-top: 0px !important;}
 table th.sorting_asc, table th.sorting_desc{border-top:3px solid var(--success);}
+.card-body table.lc-table-list th.sorted, table th.sorting_asc, table th.sorting_desc{border-top:2px solid var(--success);}
+/*.card-body table.lc-table-list th{border-top:3px solid var(--success);}*/
 table th.filtered{border-top:3px solid var(--primary);}
 
-td.actions{white-space: nowrap; text-align: right;}
+
+.lc-table-list thead a{color: #212529}
+.table-filters-line th {font-weight: 400;}
+#list_filter_id{width: 60px;}
+.lc-table-list .date-range{width: 130px;}
+
+th.actions, td.actions{white-space: nowrap; text-align: right;}
 
 .table td, .table th{padding: 0.35rem;}
 .delivery-field .form-group{display: inline-block; margin-bottom: 0px; margin-right: 15px;}

ShopBundle/Resources/translations/lcshop.fr.yaml

 list:
     title: Liste des %label%
     nbResults: Total d'élements
+    nbResultsFiltered: Total d'élements filtrés
     nbResultsOnline: Total d'élements en ligne
     nbResultsOffline: Total d'élements hors ligne
     nbResultsDeleted: Total d'élements supprimé
 
 
 action:
+    apply: Appliquer
     new: Créer %entity_label%
+    reset: Réinitialiser
     switchMerchant: Votre hub
     show: Voir
     choiceFile: Parcourir

ShopBundle/Resources/views/backend/default/edit.html.twig

     {% endapply %}
 {% endblock %}
 
-{% block content_footer_wrapper '' %}
+
 
 {% block main %}
     {% block entity_form %}

ShopBundle/Resources/views/backend/default/layout/layout.html.twig

               href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/datatables/responsive.bootstrap4.min.css') }}">
         <link rel="stylesheet"
               href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/select2/select2.min.css') }}">
+        <link rel="stylesheet"
+              href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/select2/select2-bootstrap.min.css') }}">
         <link rel="stylesheet"
               href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/bootstrap/bootstrap-switch.min.css') }}">
 
                     </section>
 
                     {% block content_footer_wrapper %}
-                        <section class="content-footer">
+                        <section class="content-footer content">
                             {% block content_footer %}{% endblock %}
                         </section>
                     {% endblock %}
         <!-- Bootstrap 4 -->
         <script src="{{ asset('bundles/lcshop/js/backend/plugin/bootstrap/bootstrap.bundle.min.js') }}"></script>
         <script src="{{ asset('bundles/lcshop/js/backend/plugin/toastr/toastr.min.js') }}"></script>
-        <script src="{{ asset('bundles/lcshop/js/backend/plugin/select2/select2.min.js') }}"></script>
+        {#<script src="{{ asset('bundles/lcshop/js/backend/plugin/select2/select2.min.js') }}"></script>#}
+        <script src="{{ asset('bundles/lcshop/js/backend/plugin/select2/select2.full.min.js') }}"></script>
         <script src="{{ asset('bundles/lcshop/js/backend/plugin/bootstrap/bootstrap-switch.min.js') }}"></script>
         <!-- AdminLTE App -->
         <script src="{{ asset('bundles/lcshop/js/backend/plugin/adminlte.min.js') }}"></script>

ShopBundle/Resources/views/backend/default/list-datatable.html.twig

+{% set _entity_config = easyadmin_entity(app.request.query.get('entity')) %}
+{% trans_default_domain _entity_config.translation_domain %}
+{% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans } %}
+
+{% extends _entity_config.templates.layout %}
+
+{% set _request_parameters = app.request.query.all|merge(_request_parameters|default({}))|merge({
+    action: app.request.get('action'),
+    entity: _entity_config.name,
+    menuIndex: app.request.get('menuIndex'),
+    submenuIndex: app.request.get('submenuIndex'),
+    sortField: app.request.get('sortField'),
+    sortDirection: app.request.get('sortDirection'),
+    page: app.request.get('page', 1),
+    filters: app.request.get('filters', []),
+    referer: null
+}) %}
+
+{% if 'search' == app.request.get('action') %}
+    {% set _request_parameters = _request_parameters|merge({
+        query: app.request.get('query')|default(''),
+    }) %}
+{% endif %}
+
+{% set _request_parameters = _request_parameters|merge({ referer: path('easyadmin', _request_parameters)|url_encode }) %}
+{% set _has_batch_actions = batch_form is defined and batch_form.vars.batch_actions|length > 0 %}
+{% set _has_filters = _entity_config.list.filters|default(false) %}
+
+{% block body_id 'easyadmin-list-' ~ _entity_config.name %}
+
+
+{% block content_title %}
+    {% apply spaceless %}
+        {% if 'search' == app.request.get('action') %}
+            {% set _default_title = 'search.page_title'|transchoice(paginator.nbResults, {}, 'EasyAdminBundle') %}
+            {{ (_entity_config.search.title is defined ? _entity_config.search.title|transchoice(paginator.nbResults) : _default_title)|raw }}
+        {% else %}
+            {{ 'list.title'|trans({"%label%" : _entity_config.label_plural is defined ? _entity_config.label_plural : _entity_config.label}, 'lcshop') }}
+
+            {#{% set _default_title = 'list.page_title'|trans(_trans_parameters, 'EasyAdminBundle') %}
+            {{ dump(_default_title) }}
+            {{ (_entity_config.list.title is defined ? _entity_config.list.title|trans(_trans_parameters) : _default_title)|raw }}#}
+        {% endif %}
+
+        {% if app.request.get('action') == 'listChildren' and app.request.get('entity') == 'ProductCategory' %}
+            : {{ entity.title }}
+        {% endif %}
+    {% endapply %}
+{% endblock %}
+
+{% block global_actions %}
+
+
+{% endblock global_actions %}
+
+{% block batch_actions %}
+    {% if _has_batch_actions %}
+        <div class="batch-actions" style="display: none">
+            {% form_theme batch_form with easyadmin_config('design.form_theme') only %}
+            {{ form(batch_form) }}
+
+            {{ include('@EasyAdmin/default/includes/_batch_action_modal.html.twig', {
+                _translation_domain: _entity_config.translation_domain,
+                _trans_parameters: _trans_parameters,
+                _entity_config: _entity_config,
+            }, with_context = false) }}
+        </div>
+    {% endif %}
+{% endblock batch_actions %}
+
+{% block content_header %}
+    {{ parent() }}
+    {{ block('batch_actions') }}
+    {% if _has_filters %}
+        {{ include('@EasyAdmin/default/includes/_filters_modal.html.twig') }}
+    {% endif %}
+{% endblock content_header %}
+
+{% block main %}
+
+    {% set _fields_visible_by_user = fields|filter((metadata, field) => easyadmin_is_granted(metadata.permission)) %}
+    {% set _number_of_hidden_results = 0 %}
+    {% set _list_item_actions = easyadmin_get_actions_for_list_item(_entity_config.name) %}
+    <div class="row">
+        <div class="col-12">
+            <div class="card card-outline card-primary">
+                <div class="card-header">
+                    <h2 class="card-title text-lg ">
+                        {#{{ "list.title"|trans({'%label%' : _entity_config['label']|lower }) }}#}
+                        <span data-toggle="tooltip" title="{{ "list.nbResults"|trans }}" class="badge badge-primary">{{ paginator.nbResults }} <i class="fa fa-bars"></i> </span>
+                        {% if paginator.nbResultsOnline is defined %}<span data-toggle="tooltip" title="{{ "list.nbResultsOnline"|trans }}" class="badge badge-success">{{ paginator.nbResultsOnline }} <i class="fa fa-check"></i> </span>{% endif %}
+                        {% if paginator.nbResultsOffline is defined %}<span data-toggle="tooltip" title="{{ "list.nbResultsOffline"|trans }}" class="badge badge-warning">{{ paginator.nbResultsOffline }} <i class="fa fa-pen"></i></span>{% endif %}
+                        {% if is_granted('ROLE_SUPER_ADMIN') and paginator.nbResultsDeleted is defined %}<span data-toggle="tooltip" title="{{ "list.nbResultsDeleted"|trans }}" class="badge badge-danger">{{ paginator.nbResultsDeleted }} <i class="fa fa-trash"></i></span>{% endif %}
+
+                    </h2>
+                    {% if easyadmin_action_is_enabled_for_list_view('new', _entity_config.name) %}
+                        {% set _action = easyadmin_get_action_for_list_view('new', _entity_config.name) %}
+                        {% block new_action %}
+                            <div class="button-action">
+                                <a class="float-right {{ _action.css_class|default('') }}" href="{{ path('easyadmin', _request_parameters|merge({ action: _action.name })) }}" target="{{ _action.target }}">
+                                    <i class="fa fa-fw fa-plus"></i>
+                                    {{ _action.label is defined and not _action.label is empty ? _action.label|trans(_trans_parameters) }}
+                                </a>
+
+                                {% if _entity_config['list']['edit_position'] is defined %}
+                                    <a class="float-right btn-sm btn-success action-sort"
+                                       href="{{ path('easyadmin', _request_parameters|merge({ action: 'sort' })) }}"
+                                       target="{{ _action.target }}">
+                                        <i class="fa fa-sort"></i> Modifier position
+                                    </a>
+                                {% endif %}
+
+                                {% if app.request.get('action') == 'listChildren' and app.request.get('entity') == 'ProductCategory' %}
+                                    <a class="float-right btn-sm btn-primary" href="{{ path('easyadmin', {action: 'list', entity: 'ProductCategory'}) }}">
+                                        <i class="fa fa-chevron-left"></i> Retour à la catégorie parente
+                                    </a>
+                                {% endif %}
+
+                            </div>
+                        {% endblock new_action %}
+                    {% endif %}
+                </div>
+                <div class="card-body p-0">
+
+                    <table class="table datatable-simple table-bordered table-hover table-striped">
+
+                        <thead>
+                        {% block table_head %}
+
+                            <tr>
+                                {% set i=0 %}
+                                {% if _has_batch_actions %}
+                                    <th  data-index="{{ i }}"  width="1px"><span><input type="checkbox" class="form-batch-checkbox-all"></span></th>
+                                    {% set i=1 %}
+                                {% endif %}
+
+                                {% for field, metadata in _fields_visible_by_user %}
+
+                                    {% set isSortingField = (metadata.property == app.request.get('sortField')) or ('association' == metadata.type and app.request.get('sortField') starts with metadata.property ~ '.') %}
+                                    {% set nextSortDirection = isSortingField ? (app.request.get('sortDirection') == 'DESC' ? 'ASC' : 'DESC') : 'DESC' %}
+                                    {% set _column_icon = isSortingField ? (nextSortDirection == 'DESC' ? 'fa-arrow-up' : 'fa-arrow-down') : 'fa-sort' %}
+
+                                    {% set searchable = ''%}
+
+                                    {% if metadata.type == 'integer' or metadata.type =="string" or metadata.type == 'text'%}
+                                        {% set searchable = 'input'%}
+                                    {% elseif metadata.type == 'association'  %}
+                                        {% set searchable= "select" %}
+                                    {% elseif metadata.type == 'date'  %}
+                                        {% set searchable= "date" %}
+                                    {% elseif metadata.type=="toggle" %}
+                                        {% set searchable= "select" %}
+                                    {% endif %}
+
+                                    {#<th class="{{ isSortingField ? 'sorted' }} {{ metadata.virtual ? 'virtual' }} {{ metadata.dataType|lower }} {{ metadata.css_class }}" >#}
+                                    <th data-index="{{ i }}"  class="{{ isSortingField ? 'sorted' }}" data-searchable="{{ searchable }}" >
+
+                                        {% if metadata.sortable %}
+                                            {{ metadata.fieldName|lc_trad(_entity_config['name']) }}
+                                        {% else %}
+                                            <span>{{ metadata.fieldName|lc_trad(_entity_config['name']) }}</span>
+                                        {% endif %}
+                                    </th>
+                                    {% set i= i +1 %}
+                                {% endfor %}
+
+                                {% if _list_item_actions|length > 0 %}
+                                    <th data-orderable="false" {% if _entity_config.list.collapse_actions %}width="10px"{% endif %} {{ easyadmin_config('design.rtl') ? 'dir="rtl"' }}>
+                                        {{ 'list.row_actions'|trans(_trans_parameters, 'EasyAdminBundle') }}
+                                    </th>
+                                {% endif %}
+                            </tr>
+
+                        {% endblock table_head %}
+                        </thead>
+                        <tbody>
+                        {% block table_body %}
+                            {% for item in paginator.currentPageResults %}
+                                {% if not easyadmin_is_granted(_entity_config.list.item_permission, item) %}
+                                    {% set _number_of_hidden_results = _number_of_hidden_results + 1 %}
+                                {% else %}
+                                    {# the empty string concatenation is needed when the primary key is an object (e.g. an Uuid object) #}
+                                    {% set _item_id = '' ~ attribute(item, _entity_config.primary_key_field_name) %}
+                                    <tr draggable="true" rel="{{ _item_id }}" data-id="{{ _item_id }}">
+                                        {% if _has_batch_actions %}
+                                            <td><input type="checkbox" class="form-batch-checkbox" value="{{ _item_id }}"></td>
+                                        {% endif %}
+
+                                        {% for field, metadata in _fields_visible_by_user %}
+
+                                            {% set isSortingField = metadata.property == app.request.get('sortField') %}
+                                            {% set _column_label =  (metadata.label ?: field|humanize)|trans(_trans_parameters)  %}
+
+                                            <td class="{{ isSortingField ? 'sorted' }} {{ metadata.dataType|lower }} {{ metadata.css_class }}" {{ easyadmin_config('design.rtl') ? 'dir="rtl"' }}>
+                                                {{ easyadmin_render_field_for_list_view(_entity_config.name, item, metadata) }}
+                                            </td>
+                                        {% endfor %}
+
+                                        {% if _list_item_actions|length > 0 %}
+                                            {% set _column_label =  'list.row_actions'|trans(_trans_parameters, 'EasyAdminBundle') %}
+                                            <td class="actions">
+                                                {% block item_actions %}
+                                                    {% set _actions_template = _entity_config.list.collapse_actions
+                                                        ? '@EasyAdmin/default/includes/_actions_dropdown.html.twig'
+                                                        : '@EasyAdmin/default/includes/_actions.html.twig'
+                                                    %}
+                                                    {{ include(_actions_template, {
+                                                        actions: _list_item_actions,
+                                                        entity_config: _entity_config,
+                                                        request_parameters: _request_parameters,
+                                                        translation_domain: _entity_config.translation_domain,
+                                                        trans_parameters: _trans_parameters,
+                                                        item_id: _item_id,
+                                                        item: item
+                                                    }, with_context = false) }}
+                                                {% endblock item_actions %}
+                                            </td>
+                                        {% endif %}
+                                    </tr>
+                                {% endif %}
+                            {% else %}
+                                <tr>
+                                    <td class="no-results" colspan="{{ _fields_visible_by_user|length + 1 }}">
+                                        {{ 'search.no_results'|trans(_trans_parameters, 'EasyAdminBundle') }}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+
+                            {% if _number_of_hidden_results > 0 %}
+                                <tr class="datagrid-row-empty">
+                                    <td class="text-center" colspan="{{ _fields_visible_by_user|length + 1 }}">
+                                        <span class="datagrid-row-empty-message"><i class="fa fa-lock mr-1"></i> {{ 'security.list.hidden_results'|trans({}, 'EasyAdminBundle') }}</span>
+                                    </td>
+                                </tr>
+                            {% endif %}
+                        {% endblock table_body %}
+                        </tbody>
+                        <tfoot></tfoot>
+                    </table>
+                    {% block delete_form %}
+                        {% set referer = paginator.currentPage == paginator.nbPages and 1 != paginator.currentPage and 1 == paginator.currentPageResults|length
+                            ? path('easyadmin', app.request.query|merge({ page: app.request.query.get('page') - 1 }))
+                            : app.request.requestUri
+                        %}
+
+                        {{ include('@EasyAdmin/default/includes/_delete_form.html.twig', {
+                            view: 'list',
+                            referer: referer,
+                            delete_form: delete_form_template,
+                            _translation_domain: _entity_config.translation_domain,
+                            _trans_parameters: _trans_parameters,
+                            _entity_config: _entity_config,
+                        }, with_context = false) }}
+                    {% endblock delete_form %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+{% endblock main %}
+{#
+{% block content_footer %}
+    {% block paginator %}
+        {{ include(_entity_config.templates.paginator) }}
+    {% endblock paginator %}
+{% endblock %}#}
+{% block head_stylesheets %}
+    {{ parent() }}
+    <link rel="stylesheet" href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/datatables/fixedHeader.dataTables.min.css') }}">
+    <link rel="stylesheet"
+          href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/datatables/dataTables.bootstrap4.min.css') }}">
+{% endblock %}
+{% block plugin_javascript %}
+    {{ parent() }}
+
+    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/jquery.dataTables.min.js') }}"></script>
+    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/dataTables.bootstrap4.min.js') }}"></script>
+    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/dataTables.responsive.min.js') }}"></script>
+    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/jquery.highlight.js') }}"></script>
+    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/responsive.bootstrap4.min.js') }}"></script>
+    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/dataTables.fixedHeader.min.js') }}"></script>
+{% endblock %}
+
+{% block script_javascript %}
+    {{ parent() }}
+    <script src="{{ asset('bundles/lcshop/js/backend/script/default/init-list-datatable.js') }}"></script>
+{% endblock %}

ShopBundle/Resources/views/backend/default/list.html.twig

 {% set _has_filters = _entity_config.list.filters|default(false) %}
 
 {% block body_id 'easyadmin-list-' ~ _entity_config.name %}
-
+{#{% block body_class 'list list-' ~ _entity_config.name|lower %}#}
 
 {% block content_title %}
     {% apply spaceless %}
             {% set _default_title = 'search.page_title'|transchoice(paginator.nbResults, {}, 'EasyAdminBundle') %}
             {{ (_entity_config.search.title is defined ? _entity_config.search.title|transchoice(paginator.nbResults) : _default_title)|raw }}
         {% else %}
-            {{ 'list.title'|trans({"%label%" : _entity_config.label_plural is defined ? _entity_config.label_plural : _entity_config.label}, 'lcshop') }}
-
-            {#{% set _default_title = 'list.page_title'|trans(_trans_parameters, 'EasyAdminBundle') %}
-            {{ dump(_default_title) }}
-            {{ (_entity_config.list.title is defined ? _entity_config.list.title|trans(_trans_parameters) : _default_title)|raw }}#}
-        {% endif %}
-
-        {% if app.request.get('action') == 'listChildren' and app.request.get('entity') == 'ProductCategory' %}
-            : {{ entity.title }}
+            {% set _default_title = 'list.page_title'|trans(_trans_parameters, 'EasyAdminBundle') %}
+            {{ (_entity_config.list.title is defined ? _entity_config.list.title|trans(_trans_parameters) : _default_title)|raw }}
         {% endif %}
     {% endapply %}
 {% endblock %}
 
 {% block global_actions %}
-
-
+    {#{% if easyadmin_action_is_enabled_for_list_view('new', _entity_config.name) %}
+        {% set _action = easyadmin_get_action_for_list_view('new', _entity_config.name) %}
+        {% block new_action %}
+            <div class="button-action">
+                <a class="{{ _action.css_class|default('') }}"
+                   href="{{ path('easyadmin', _request_parameters|merge({ action: _action.name })) }}"
+                   target="{{ _action.target }}">
+                    {% if _action.icon %}<i class="fa fa-fw fa-{{ _action.icon }}"></i>{% endif %}
+                    {{ _action.label is defined and not _action.label is empty ? _action.label|trans(_trans_parameters) }}
+                </a>
+            </div>
+        {% endblock new_action %}
+    {% endif %}#}
 {% endblock global_actions %}
 
 {% block batch_actions %}
 {% endblock content_header %}
 
 {% block main %}
-
     {% set _fields_visible_by_user = fields|filter((metadata, field) => easyadmin_is_granted(metadata.permission)) %}
     {% set _number_of_hidden_results = 0 %}
     {% set _list_item_actions = easyadmin_get_actions_for_list_item(_entity_config.name) %}
                 <div class="card-header">
                     <h2 class="card-title text-lg ">
                         {#{{ "list.title"|trans({'%label%' : _entity_config['label']|lower }) }}#}
-                        <span data-toggle="tooltip" title="{{ "list.nbResults"|trans }}" class="badge badge-primary">{{ paginator.nbResults }} <i class="fa fa-bars"></i> </span>
-                        {% if paginator.nbResultsOnline is defined %}<span data-toggle="tooltip" title="{{ "list.nbResultsOnline"|trans }}" class="badge badge-success">{{ paginator.nbResultsOnline }} <i class="fa fa-check"></i> </span>{% endif %}
-                        {% if paginator.nbResultsOffline is defined %}<span data-toggle="tooltip" title="{{ "list.nbResultsOffline"|trans }}" class="badge badge-warning">{{ paginator.nbResultsOffline }} <i class="fa fa-pen"></i></span>{% endif %}
-                        {% if is_granted('ROLE_SUPER_ADMIN') and paginator.nbResultsDeleted is defined %}<span data-toggle="tooltip" title="{{ "list.nbResultsDeleted"|trans }}" class="badge badge-danger">{{ paginator.nbResultsDeleted }} <i class="fa fa-trash"></i></span>{% endif %}
+                        {% if paginator.nbResultsTotal !=  paginator.nbResults %}
+                            <span data-toggle="tooltip" title="{{ "list.nbResultsFiltered"|trans }}"
+                                  class="badge badge-info">{{ paginator.nbResults }} <i class="fa fa-search"></i> </span>
+                            |
+                        {% endif %}
+                        <span data-toggle="tooltip" title="{{ "list.nbResults"|trans }}"
+                              class="badge badge-primary">{{ paginator.nbResultsTotal }} <i class="fa fa-bars"></i> </span>
+                        {% if paginator.nbResultsOnline is defined %}<span data-toggle="tooltip"
+                                                                           title="{{ "list.nbResultsOnline"|trans }}"
+                                                                           class="badge badge-success">{{ paginator.nbResultsOnline }}
+                            <i class="fa fa-check"></i> </span>{% endif %}
+                        {% if paginator.nbResultsOffline is defined %}<span data-toggle="tooltip"
+                                                                            title="{{ "list.nbResultsOffline"|trans }}"
+                                                                            class="badge badge-warning">{{ paginator.nbResultsOffline }}
+                            <i class="fa fa-pen"></i></span>{% endif %}
+                        {% if is_granted('ROLE_SUPER_ADMIN') and paginator.nbResultsDeleted is defined %}<span
+                            data-toggle="tooltip" title="{{ "list.nbResultsDeleted"|trans }}"
+                            class="badge badge-danger">{{ paginator.nbResultsDeleted }} <i class="fa fa-trash"></i>
+                            </span>{% endif %}
 
                     </h2>
                     {% if easyadmin_action_is_enabled_for_list_view('new', _entity_config.name) %}
                         {% set _action = easyadmin_get_action_for_list_view('new', _entity_config.name) %}
                         {% block new_action %}
                             <div class="button-action">
-                                <a class="float-right {{ _action.css_class|default('') }}" href="{{ path('easyadmin', _request_parameters|merge({ action: _action.name })) }}" target="{{ _action.target }}">
+                                <a class="float-right {{ _action.css_class|default('') }}"
+                                   href="{{ path('easyadmin', _request_parameters|merge({ action: _action.name })) }}"
+                                   target="{{ _action.target }}">
                                     <i class="fa fa-fw fa-plus"></i>
                                     {{ _action.label is defined and not _action.label is empty ? _action.label|trans(_trans_parameters) }}
                                 </a>
                                 {% endif %}
 
                                 {% if app.request.get('action') == 'listChildren' and app.request.get('entity') == 'ProductCategory' %}
-                                    <a class="float-right btn-sm btn-primary" href="{{ path('easyadmin', {action: 'list', entity: 'ProductCategory'}) }}">
+                                    <a class="float-right btn-sm btn-primary"
+                                       href="{{ path('easyadmin', {action: 'list', entity: 'ProductCategory'}) }}">
                                         <i class="fa fa-chevron-left"></i> Retour à la catégorie parente
                                     </a>
                                 {% endif %}
                         {% endblock new_action %}
                     {% endif %}
                 </div>
-                <div class="card-body p-0">
+                {{ form_start(filters_form) }}
+                {% form_theme filters_form '@LcShop/backend/form/custom_bootstrap_4.html.twig' %}
+
+                <input type="hidden" name="entity" value="{{ _entity_config.name }}">
+                <input type="hidden" name="menuIndex" value="{{ app.request.get('menuIndex') }}">
+                <input type="hidden" name="submenuIndex" value="{{ app.request.get('submenuIndex') }}">
+                <input type="hidden" name="sortField" value="{{ app.request.get('sortField', '') }}">
+                <input type="hidden" name="sortDirection" value="{{ app.request.get('sortDirection', 'DESC') }}">
 
-                    <table class="table datatable-simple table-bordered table-hover table-striped">
+                <div class="card-body p-0">
 
+                    <table class="table lc-table-list datagrid table-bordered table-hover table-striped ">
                         <thead>
                         {% block table_head %}
-
                             <tr>
-                                {% set i=0 %}
                                 {% if _has_batch_actions %}
-                                    <th  data-index="{{ i }}"  width="1px"><span><input type="checkbox" class="form-batch-checkbox-all"></span></th>
-                                    {% set i=1 %}
+                                    <th width="1px"><span><input type="checkbox" class="form-batch-checkbox-all"></span>
+                                    </th>
                                 {% endif %}
 
                                 {% for field, metadata in _fields_visible_by_user %}
-
                                     {% set isSortingField = (metadata.property == app.request.get('sortField')) or ('association' == metadata.type and app.request.get('sortField') starts with metadata.property ~ '.') %}
                                     {% set nextSortDirection = isSortingField ? (app.request.get('sortDirection') == 'DESC' ? 'ASC' : 'DESC') : 'DESC' %}
+                                    {% set _column_label = metadata.label|trans(_trans_parameters) %}
                                     {% set _column_icon = isSortingField ? (nextSortDirection == 'DESC' ? 'fa-arrow-up' : 'fa-arrow-down') : 'fa-sort' %}
 
-                                    {% set searchable = ''%}
-
-                                    {% if metadata.type == 'integer' or metadata.type =="string" or metadata.type == 'text'%}
-                                        {% set searchable = 'input'%}
-                                    {% elseif metadata.type == 'association'  %}
-                                        {% set searchable= "select" %}
-                                    {% elseif metadata.type == 'date'  %}
-                                        {% set searchable= "date" %}
-                                    {% elseif metadata.type=="toggle" %}
-                                        {% set searchable= "select" %}
-                                    {% endif %}
-
-                                    {#<th class="{{ isSortingField ? 'sorted' }} {{ metadata.virtual ? 'virtual' }} {{ metadata.dataType|lower }} {{ metadata.css_class }}" >#}
-                                    <th data-index="{{ i }}"  class="{{ isSortingField ? 'sorted' }}" data-searchable="{{ searchable }}" >
-
+                                    <th class="{{ isSortingField ? 'sorted' }} {{ metadata.virtual ? 'virtual' }} {{ metadata.dataType|lower }} {{ metadata.css_class }}" {{ easyadmin_config('design.rtl') ? 'dir="rtl"' }}>
                                         {% if metadata.sortable %}
-                                            {{ metadata.fieldName|lc_trad(_entity_config['name']) }}
+                                            <a href="{{ path('easyadmin', _request_parameters|merge({ page: 1, sortField: metadata.property, sortDirection: nextSortDirection })) }}">
+                                                {{ _column_label|raw }} <i class="fa fa-fw {{ _column_icon }}"></i>
+                                            </a>
                                         {% else %}
-                                            <span>{{ metadata.fieldName|lc_trad(_entity_config['name']) }}</span>
+                                            <span>{{ _column_label|raw }}</span>
                                         {% endif %}
                                     </th>
-                                    {% set i= i +1 %}
                                 {% endfor %}
 
                                 {% if _list_item_actions|length > 0 %}
-                                    <th data-orderable="false" {% if _entity_config.list.collapse_actions %}width="10px"{% endif %} {{ easyadmin_config('design.rtl') ? 'dir="rtl"' }}>
-                                        {{ 'list.row_actions'|trans(_trans_parameters, 'EasyAdminBundle') }}
+                                    <th {% if _entity_config.list.collapse_actions %}width="10px"{% endif %} {{ easyadmin_config('design.rtl') ? 'dir="rtl"' }}>
+                                        <span class="sr-only">{{ 'list.row_actions'|trans(_trans_parameters, 'EasyAdminBundle') }}</span>
                                     </th>
                                 {% endif %}
                             </tr>
-
                         {% endblock table_head %}
+                            <tr class="table-filters-line">
+                                {% if _has_batch_actions %}<th></th>{% endif %}
+                                {% for field, metadata in _fields_visible_by_user %}
+                                <th>
+
+                                    {% if filters_form[field] is defined %}
+                                        {% if metadata['dataType'] == 'datetime' or metadata['dataType'] == 'date' %}
+                                            <div class="input-group input-group-sm">
+                                                <input type="text" class="form-control input-sm float-right date-range">
+                                                <div class="hidden date-time-range-fields" style="display: none;">
+                                                    {{ form_widget(filters_form[field]['dateStart'], {"attr" : {'class' : 'date-start'}}) }}
+                                                    {{ form_widget(filters_form[field]['dateEnd'], {"attr" : {'class' : 'date-end'}}) }}
+                                                </div>
+                                            </div>
+                                        {% else %}
+                                            <div class="form-widget input-group-sm">
+                                            {{ form_widget(filters_form[field], {'attr': {'class' :  'input-sm'}}) }}
+                                            </div>
+                                        {% endif %}
+
+                                    {% endif %}
+
+
+                                </th>
+                                {% endfor %}
+                                {% if _list_item_actions|length > 0 %}
+                                    <th class="actions">
+                                        <button type="submit" class="btn btn-sm btn-info" data-toggle="tooltip" title="{{ "action.apply"|trans({}, 'lcshop') }}" aria-label="{{ "action.apply"|trans({}, 'lcshop') }}">
+                                            <i class="fa fa-search"></i>
+                                        </button>
+                                        {% if filters_form.vars.submitted %}
+                                            <a href="{{ path('easyadmin', {action: 'list', entity: _entity_config.name}) }}" class="btn btn-sm btn-warning lc-reset-filters" data-toggle="tooltip" title="{{ "action.reset"|trans({}, 'lcshop') }}" aria-label="{{ "action.reset"|trans({}, 'lcshop') }}">
+                                                <i class="fa fa-eraser"></i>
+                                            </a>
+                                        {% endif %}
+
+
+                                    </th>
+                                {% endif %}
+
+                            </tr>
+                        {% block table_search %}
+
+                        {% endblock %}
+
                         </thead>
+
                         <tbody>
                         {% block table_body %}
                             {% for item in paginator.currentPageResults %}
                                 {% else %}
                                     {# the empty string concatenation is needed when the primary key is an object (e.g. an Uuid object) #}
                                     {% set _item_id = '' ~ attribute(item, _entity_config.primary_key_field_name) %}
-                                    <tr draggable="true" rel="{{ _item_id }}" data-id="{{ _item_id }}">
+                                    <tr data-id="{{ _item_id }}">
                                         {% if _has_batch_actions %}
-                                            <td><input type="checkbox" class="form-batch-checkbox" value="{{ _item_id }}"></td>
+                                            <td><input type="checkbox" class="form-batch-checkbox"
+                                                       value="{{ _item_id }}"></td>
                                         {% endif %}
 
                                         {% for field, metadata in _fields_visible_by_user %}
-
                                             {% set isSortingField = metadata.property == app.request.get('sortField') %}
-                                            {% set _column_label =  (metadata.label ?: field|humanize)|trans(_trans_parameters)  %}
+                                            {% set _column_label =  (metadata.label ?: field|humanize)|trans(_trans_parameters) %}
 
                                             <td class="{{ isSortingField ? 'sorted' }} {{ metadata.dataType|lower }} {{ metadata.css_class }}" {{ easyadmin_config('design.rtl') ? 'dir="rtl"' }}>
                                                 {{ easyadmin_render_field_for_list_view(_entity_config.name, item, metadata) }}
                                                 {% block item_actions %}
                                                     {% set _actions_template = _entity_config.list.collapse_actions
                                                         ? '@EasyAdmin/default/includes/_actions_dropdown.html.twig'
-                                                        : '@EasyAdmin/default/includes/_actions.html.twig'
-                                                    %}
+                                                        : '@EasyAdmin/default/includes/_actions.html.twig' %}
                                                     {{ include(_actions_template, {
                                                         actions: _list_item_actions,
                                                         entity_config: _entity_config,
                             {% if _number_of_hidden_results > 0 %}
                                 <tr class="datagrid-row-empty">
                                     <td class="text-center" colspan="{{ _fields_visible_by_user|length + 1 }}">
-                                        <span class="datagrid-row-empty-message"><i class="fa fa-lock mr-1"></i> {{ 'security.list.hidden_results'|trans({}, 'EasyAdminBundle') }}</span>
+                                        <span class="datagrid-row-empty-message"><i
+                                                    class="fa fa-lock mr-1"></i> {{ 'security.list.hidden_results'|trans({}, 'EasyAdminBundle') }}</span>
                                     </td>
                                 </tr>
                             {% endif %}
                         {% endblock table_body %}
                         </tbody>
-                        <tfoot></tfoot>
                     </table>
+
+                    {{ form_end(filters_form) }}
+
                     {% block delete_form %}
                         {% set referer = paginator.currentPage == paginator.nbPages and 1 != paginator.currentPage and 1 == paginator.currentPageResults|length
                             ? path('easyadmin', app.request.query|merge({ page: app.request.query.get('page') - 1 }))
-                            : app.request.requestUri
-                        %}
+                            : app.request.requestUri %}
 
                         {{ include('@EasyAdmin/default/includes/_delete_form.html.twig', {
                             view: 'list',
         </div>
     </div>
 
-
 {% endblock main %}
-{#
+
 {% block content_footer %}
+    <div class="container-fluid">
     {% block paginator %}
         {{ include(_entity_config.templates.paginator) }}
     {% endblock paginator %}
-{% endblock %}#}
+    </div>
+{% endblock %}
+
+
 {% block head_stylesheets %}
     {{ parent() }}
-    <link rel="stylesheet" href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/datatables/fixedHeader.dataTables.min.css') }}">
-    <link rel="stylesheet"
-          href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/datatables/dataTables.bootstrap4.min.css') }}">
+    <link rel="stylesheet" href="{{ asset('bundles/lcshop/css/backend/adminlte/plugins/daterange/daterangepicker.css') }}">
 {% endblock %}
+
 {% block plugin_javascript %}
     {{ parent() }}
-
-    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/jquery.dataTables.min.js') }}"></script>
-    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/dataTables.bootstrap4.min.js') }}"></script>
-    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/dataTables.responsive.min.js') }}"></script>
+    <script src="{{  asset('bundles/lcshop/js/backend/plugin/daterange/moment.min.js')}}"></script>
+    <script src="{{  asset('bundles/lcshop/js/backend/plugin/daterange/daterangepicker.js')}}"></script>
     <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/jquery.highlight.js') }}"></script>
-    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/responsive.bootstrap4.min.js') }}"></script>
-    <script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/dataTables.fixedHeader.min.js') }}"></script>
+    {#<script src="{{ asset('bundles/lcshop/js/backend/plugin/datatables/responsive.bootstrap4.min.js') }}"></script>#}
 {% endblock %}
 
 {% block script_javascript %}