From 6fa645484e60c35dbf0b0ffcb1673f843a2b2c89 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>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../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 3ea36ed876..ebf9ffad4e 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 69fc5a998f..a471a5a494 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.20.1