Column filter

composer.json

@@ -1,8 +1,18 @@
 {
-    "name": "omines/datatables-bundle",
+    "name": "fluxter/datatables-bundle",
     "type": "symfony-bundle",
     "description": "Symfony DataTables Bundle with native Doctrine ORM, Elastica and MongoDB support",
-    "keywords": ["symfony","jquery","datatable", "datatables", "bundle", "doctrine", "orm", "elastica", "mongodb"],
+    "keywords": [
+        "symfony",
+        "jquery",
+        "datatable",
+        "datatables",
+        "bundle",
+        "doctrine",
+        "orm",
+        "elastica",
+        "mongodb"
+    ],
     "license": "MIT",
     "authors": [
         {
@@ -17,7 +27,7 @@
         }
     ],
     "support": {
-      "issues": "https://github.com/omines/datatables-bundle/issues"
+        "issues": "https://github.com/fluxter/datatables-bundle/issues"
     },
     "require": {
         "php": ">=8.1",
@@ -70,10 +80,14 @@
         "openspout/openspout": "To use the OpenSpout Excel exporter"
     },
     "autoload": {
-        "psr-4": { "Omines\\DataTablesBundle\\": "src/"}
+        "psr-4": {
+            "Omines\\DataTablesBundle\\": "src/"
+        }
     },
     "autoload-dev": {
-        "psr-4": { "Tests\\": "tests/"}
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
     },
     "config": {
         "preferred-install": "dist",
@@ -87,4 +101,4 @@
             "dev-master": "0.8-dev"
         }
     }
-}
+}

src/Adapter/Doctrine/ORM/SearchCriteriaProvider.php

@@ -43,8 +43,12 @@ private function processSearchColumns(QueryBuilder $queryBuilder, DataTableState
                         continue;
                     }
                 }
-                $search = $queryBuilder->expr()->literal($search);
-                $queryBuilder->andWhere(new Comparison($column->getField(), $column->getOperator(), $search));
+                $expr = $queryBuilder->expr();
+                $queryBuilder->andWhere(new Comparison(
+                    $column->getLeftExpr(), 
+                    $column->getOperator(),
+                    $expr->literal($column->getRightExpr($search))
+                ));
             }
         }
     }
@@ -56,8 +60,11 @@ private function processGlobalSearch(QueryBuilder $queryBuilder, DataTableState
             $comparisons = $expr->orX();
             foreach ($state->getDataTable()->getColumns() as $column) {
                 if ($column->isGlobalSearchable() && !empty($column->getField()) && $column->isValidForSearch($globalSearch)) {
-                    $comparisons->add(new Comparison($column->getLeftExpr(), $column->getOperator(),
-                        $expr->literal($column->getRightExpr($globalSearch))));
+                    $comparisons->add(new Comparison(
+                        $column->getLeftExpr(), 
+                        $column->getOperator(),
+                        $expr->literal($column->getRightExpr($globalSearch))
+                    ));
                 }
             }
             $queryBuilder->andWhere($comparisons);

src/Resources/views/Filter/select.html.twig

@@ -1,13 +1,10 @@
 <label>
-    <select
-            id="{{ datatable.setting('name') }}-column-{{ column.index }}"
-            data-search-column-index="{{ column.index }}"
-    >
-        {% if column.filter.placeholder != null %}
-            <option class="placeholder">{{ column.filter.placeholder|trans }}</option>
-        {% endif %}
-        {% for key, choice in column.filter.choices %}
-            <option value="{{ key }}">{{ choice }}</option>
-        {% endfor %}
-    </select>
+  <select class="form-select" id="{{ datatable.name }}-column-{{ column.index }}" data-search-column-index="{{ column.index }}">
+    {% if column.filter.placeholder != null %}
+      <option class="placeholder">{{ column.filter.placeholder|trans }}</option>
+    {% endif %}
+    {% for key, choice in column.filter.choices %}
+      <option value="{{ key }}">{{ choice }}</option>
+    {% endfor %}
+  </select>
 </label>

src/Resources/views/Filter/select.js.twig

@@ -1,3 +1 @@
-$('#{{ datatable.setting('name') }}').on('stateLoaded.dt', function (e, settings, data) {
-    $('#{{ datatable.setting('name') }}-column-{{ column.index }}').val(data.columns[{{ column.index }}].search.search) ;
-});
+$('#{{ datatable.name }}-column-{{ column.index }}').val(data.columns[{{ column.index }}].search.search); 

src/Resources/views/Filter/text.html.twig

@@ -1,13 +1,8 @@
 <label>
-    <input id="{{ datatable.setting('name') }}-column-{{ column.index }}"
-           data-search-column-index="{{ column.index }}"
-            {% if column.filter.placeholder != null %}
-                placeholder="{{ column.filter.placeholder|trans }}"
-            {% endif %}
-           value="{{ column.searchValue }}">
-    <script>
-        document.getElementById('domains').addEventListener('restore', function (e, data) {
-            console.log(data);
-        });
-    </script>
+    <input class="form-control" 
+        id="{{ datatable.name }}-column-{{ column.index }}" 
+        data-search-column-index="{{ column.index }}" 
+        placeholder="{{ column.filter.placeholder ?? '' }}" 
+        value="{{ searchValue ?? '' }}" 
+    />
 </label>

src/Resources/views/Filter/text.js.twig

@@ -1,3 +1 @@
-$('#{{ datatable.setting('name') }}').on('stateLoaded.dt', function (e, settings, data) {
-    $('#{{ datatable.setting('name') }}-column-{{ column.index }}').val(data.columns[{{ column.index }}].search.search) ;
-});
+$('#{{ datatable.name }}-column-{{ column.index }}').val(data.columns[{{ column.index }}].search.search); 

src/Resources/views/datatable_html.html.twig

@@ -1,29 +1,64 @@
 {% trans_default_domain datatable.translationDomain %}
 
 <table id="{{ datatable.name }}" class="{% if className is defined and className is not empty %}{{ className }}{% endif %}">
-    <thead>
+  <thead class="table-light">
     <tr>
+      {% for column in datatable.columns %}
+        <th>{{ column.label|trans }}</th>
+      {% endfor %}
+    </tr>
+    {% if datatable.option('searching') and columnFilter ?? '' in ['both', 'thead'] %}
+      <tr class="datatable-filters">
         {% for column in datatable.columns %}
-            <th>{{ column.label|trans }}</th>
+          <td>
+            {% if column.filter != null %}{% include column.filter.templateHtml %}{% endif %}
+          </td>
         {% endfor %}
-    </tr>
-    {#% if datatable.option('searching') and datatable.setting('column_filter') in ['both', 'thead'] %}
-        <tr class="datatable-filters">
-            {% for column in datatable.columns %}
-                <td>{% if column.filter != null %}{% include column.filter.templateHtml %}{% endif %}</td>
-            {% endfor %}
-        </tr>
-    {% endif %#}
-    </thead>
-    {#% if datatable.option('searching') and datatable.setting('column_filter') in ['both', 'tfoot'] %}
-        <tfoot>
-        <tr class="datatable-filters">
-            {% for column in datatable.columns %}
-                <td>{% if column.filter != null %}{% include column.filter.templateHtml %}{% endif %}</td>
-            {% endfor %}
-        </tr>
-        </tfoot>
-    {% endif %#}
-    <tbody>
-    </tbody>
+      </tr>
+    {% endif %}
+  </thead>
+  <tbody></tbody>
+
+  {% if datatable.option('searching') and columnFilter ?? '' in ['both', 'tfoot'] %}
+    <tfoot>
+      <tr class="datatable-filters">
+        {% for column in datatable.columns %}
+          <td>
+            {% if column.filter != null %}{% include column.filter.templateHtml %}{% endif %}
+          </td>
+        {% endfor %}
+      </tr>
+    </tfoot>
+  {% endif %}
 </table>
+
+{% if datatable.option('searching') %}
+  <script>
+    $('#{{ datatable.name }}').on('stateLoaded.dt', function (e, settings, data) {
+        {% for column in datatable.columns %}
+        {% if column.filter != null %}{% include column.filter.templateJs %}{% endif %}
+        {% endfor %}
+    });
+
+    $('#{{ datatable.name }}').on('init.dt', function (e, settings, data) {
+        {% for column in datatable.columns %}
+            {% if column.filter != null %}
+                $(function() {
+                    $('#{{ datatable.name }}-column-{{ column.index }}').on(
+                        "keyup change", 
+                        function() { 
+                            const table = $(this).closest("table").DataTable();
+                            const column = table.columns({{ column.index }});
+                            const newValue = $(this).val();
+
+                            if (column.search() !== newValue) {
+                                column.search(newValue).draw();
+                            }
+                        }
+                    )
+                });
+            {% endif %}
+        {% endfor %}
+    });
+</script>
+{% endif %}