From 9521716359cafe89b7dedd39e9fe4aeda935978c Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Mon, 11 Jan 2021 14:19:23 +0100
Subject: [PATCH] Bug 27402: Move to datatables.js

To make it reusable we need to move the code to datatables.js

So far only the cities table is using the column filters so there is no other
view to test.

Note that the existing implementation didn't work at all, and were base
on what is done on the detail.pl page (using table_filters.js)

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/en/modules/admin/cities.tt           | 26 ------------
 koha-tmpl/intranet-tmpl/prog/js/datatables.js | 40 +++++++++++++++----
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
index 3ea36ed876c..ebf9ffad4e0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
@@ -181,14 +181,10 @@
             cities_table_url += 'q='+ encodeURIComponent(JSON.stringify(city_name_filter));
         [% END %]
 
-            $('#table_cities thead tr').clone(true).appendTo( '#table_cities thead' );
-
-
             var cities_table = $("#table_cities").api({
                 "ajax": {
                     "url": cities_table_url
                 },
-                orderCellsTop: true,
                 "order": [[ 1, "asc" ]],
                 "columnDefs": [ {
                     "targets": [0,1,2,3,4],
@@ -239,28 +235,6 @@
                 ]
             }, [], 1);
 
-
-            var table = cities_table.DataTable();
-            $('#table_cities thead tr:eq(1) th').each( function (i) {
-                var is_searchable = table.settings()[0].aoColumns[i].bSearchable;
-                if ( is_searchable ) {
-                    var title = $(this).text();
-                    var search_title = _("Search %s").format(title);
-                    $(this).html( '<input type="text" placeholder="%s" />'.format(search_title) );
-
-                    $( 'input', this ).on( 'keyup change', function () {
-                        if ( table.column(i).search() !== this.value ) {
-                            table
-                                .column(i)
-                                .search( this.value )
-                                .draw();
-                        }
-                    } );
-                } else {
-                    $(this).html('');
-                }
-            } );
-
         });
     </script>
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
index 69fc5a998f8..a471a5a4948 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
@@ -511,6 +511,11 @@ jQuery.fn.dataTable.ext.errMode = function(settings, note, message) {
 
     $.fn.api = function(options, columns_settings, add_filters) {
         var settings = null;
+
+        if ( add_filters ) {
+            $(this).find('thead tr').clone(true).appendTo( $(this).find('thead') );
+        }
+
         if(options) {
             if(!options.criteria || ['contains', 'starts_with', 'ends_with', 'exact'].indexOf(options.criteria.toLowerCase()) === -1) options.criteria = 'contains';
             options.criteria = options.criteria.toLowerCase();
@@ -714,17 +719,38 @@ jQuery.fn.dataTable.ext.errMode = function(settings, note, message) {
             }
         );
 
+        $(".dt_button_clear_filter, .columns_controls, .export_controls").tooltip();
+
         if ( add_filters ) {
-            // Duplicate the table header row for columnFilter
-            thead_row = this.find('thead tr');
-            clone = thead_row.clone().addClass('filters_row');
-            clone.find("th.NoSort").html('');
-            thead_row.before(clone);
+            settings['orderCellsTop'] = true;
         }
 
-        $(".dt_button_clear_filter, .columns_controls, .export_controls").tooltip();
+        var table = $(this).dataTable(settings);
+
+        if ( add_filters ) {
+            var table_dt = table.DataTable();
+            $(this).find('thead tr:eq(1) th').each( function (i) {
+                var is_searchable = table_dt.settings()[0].aoColumns[i].bSearchable;
+                if ( is_searchable ) {
+                    var title = $(this).text();
+                    var search_title = _("Search %s").format(title);
+                    $(this).html( '<input type="text" placeholder="%s" />'.format(search_title) );
+
+                    $( 'input', this ).on( 'keyup change', function () {
+                        if ( table_dt.column(i).search() !== this.value ) {
+                            table_dt
+                                .column(i)
+                                .search( this.value )
+                                .draw();
+                        }
+                    } );
+                } else {
+                    $(this).html('');
+                }
+            } );
+        }
 
-        return $(this).dataTable(settings);
+        return table;
     };
 
 })(jQuery);
-- 
2.30.0