From 44b818061412a0ad663c4365a5ce157f73563252 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)
---
 .../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