View | Details | Raw Unified | Return to bug 38255
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/js/datatables.js (-11 lines)
Lines 57-75 var dataTablesDefaults = { Link Here
57
    "fixedHeader": true,
57
    "fixedHeader": true,
58
    initComplete: function( settings ) {
58
    initComplete: function( settings ) {
59
        var tableId = settings.nTable.id;
59
        var tableId = settings.nTable.id;
60
        let table_node = $("#" + tableId);
61
62
        state =  settings.oLoadedState;
60
        state =  settings.oLoadedState;
63
        state && state.search && toggledClearFilter(state.search.search, tableId);
61
        state && state.search && toggledClearFilter(state.search.search, tableId);
64
65
        //if (settings.ajax) {
66
        //    if ( typeof this.api === 'function' ) {
67
        //        _dt_add_delay(this.api(), table_node);
68
        //    } else {
69
        //        let dt = $(table_node).DataTable();
70
        //        _dt_add_delay(dt, table_node);
71
        //    }
72
        //}
73
    },
62
    },
74
};
63
};
75
DataTable.defaults.column.orderSequence = ['asc', 'desc'];
64
DataTable.defaults.column.orderSequence = ['asc', 'desc'];
(-)a/koha-tmpl/opac-tmpl/bootstrap/js/datatables.js (-29 / +255 lines)
Lines 40-78 var dataTablesDefaults = { Link Here
40
        'clearFilter', 'copy', 'csv', 'print'
40
        'clearFilter', 'copy', 'csv', 'print'
41
    ],
41
    ],
42
    "paginate": false,
42
    "paginate": false,
43
    initComplete: function( settings) {
43
    "buttons": [{
44
        var tableId = settings.nTable.id
44
        fade: 100,
45
        // When the DataTables search function is triggered,
45
        className: "dt_button_clear_filter",
46
        // enable or disable the "Clear filter" button based on
46
        titleAttr: __('Clear filter'),
47
        // the presence of a search string
47
        enabled: false,
48
        $("#" + tableId ).on( 'search.dt', function ( e, settings ) {
48
        text: '<i class="fa fa-lg fa-times"></i> <span class="dt-button-text">' + __('Clear filter') + '</span>',
49
            if( settings.oPreviousSearch.sSearch == "" ){
49
        available: function ( dt ) {
50
                $("#" + tableId + "_wrapper").find(".dt_button_clear_filter").addClass("disabled");
50
            // The "clear filter" button is made available if this test returns true
51
            } else {
51
            if( dt.settings()[0].aanFeatures.f ){ // aanFeatures.f is null if there is no search form
52
                $("#" + tableId + "_wrapper").find(".dt_button_clear_filter").removeClass("disabled");
52
                return true;
53
            }
53
            }
54
        });
54
        },
55
    }
55
        action: function ( e, dt, node ) {
56
            dt.search( "" ).draw("page");
57
            node.addClass("disabled");
58
        }
59
    }],
60
    initComplete: function( settings) {
61
        var tableId = settings.nTable.id;
62
        state =  settings.oLoadedState;
63
        state && state.search && toggledClearFilter(state.search.search, tableId);
64
    },
56
};
65
};
57
DataTable.defaults.column.orderSequence = ['asc', 'desc'];
66
DataTable.defaults.column.orderSequence = ['asc', 'desc'];
58
67
59
$.fn.dataTable.ext.buttons.clearFilter = {
68
function toggledClearFilter(searchText, tableId){
60
    fade: 100,
69
    let clear_filter_button = $("#" + tableId + "_wrapper").find(".dt_button_clear_filter");
61
    className: "dt_button_clear_filter",
70
    if( searchText == "" ){
62
    titleAttr: __("Clear filter"),
71
        clear_filter_button.addClass("disabled");
63
    enabled: false,
72
    } else {
64
    text: '<i class="fa fa-lg fa-times"></i> <span class="dt-button-text">' + __("Clear filter") + '</span>',
73
        clear_filter_button.removeClass("disabled");
65
    available: function ( dt ) {
66
        // The "clear filter" button is made available if this test returns true
67
        if( dt.settings()[0].aanFeatures.f ){ // aanFeatures.f is null if there is no search form
68
            return true;
69
        }
70
    },
71
    action: function ( e, dt, node ) {
72
        dt.search( "" ).draw("page");
73
        node.addClass("disabled");
74
    }
74
    }
75
};
75
}
76
76
77
(function() {
77
(function() {
78
78
Lines 118-120 $.fn.dataTable.ext.buttons.clearFilter = { Link Here
118
    });
118
    });
119
119
120
}());
120
}());
121
- 
121
122
function _dt_buttons(params){
123
    let settings = params.settings || {};
124
    let table_settings = params.table_settings;
125
126
    var exportColumns = ":visible:not(.noExport)";
127
    if( settings.hasOwnProperty("exportColumns") ){
128
        // A custom buttons configuration has been passed from the page
129
        exportColumns = settings["exportColumns"];
130
    }
131
132
    var export_format = {
133
        body: function ( data, row, column, node ) {
134
            var newnode = $(node);
135
136
            if ( newnode.find(".noExport").length > 0 ) {
137
                newnode = newnode.clone();
138
                newnode.find(".noExport").remove();
139
            }
140
141
            return newnode.text().replace( /\n/g, ' ' ).trim();
142
        }
143
    }
144
145
    var export_buttons = [
146
        {
147
            extend: 'excelHtml5',
148
            exportOptions: {
149
                columns: exportColumns,
150
                format:  export_format
151
            },
152
        },
153
        {
154
            extend: 'csvHtml5',
155
            exportOptions: {
156
                columns: exportColumns,
157
                format:  export_format
158
            },
159
        },
160
        {
161
            extend: 'copyHtml5',
162
            exportOptions: {
163
                columns: exportColumns,
164
                format:  export_format
165
            },
166
        },
167
        {
168
            extend: 'print',
169
            exportOptions: {
170
                columns: exportColumns,
171
                format:  export_format
172
            },
173
        }
174
    ];
175
176
    let buttons = [];
177
    buttons.push(
178
        {
179
            fade: 100,
180
            className: "dt_button_clear_filter",
181
            titleAttr: __("Clear filter"),
182
            enabled: false,
183
            text: '<i class="fa fa-lg fa-remove"></i> <span class="dt-button-text">' + __("Clear filter") + '</span>',
184
            action: function ( e, dt, node, config ) {
185
                dt.search( "" ).draw("page");
186
                node.addClass("disabled");
187
            }
188
        }
189
    );
190
191
    // Retrieving bKohaColumnsUseNames from the options passed to the constructor, not DT's settings
192
    // But ideally should be retrieved using table.data()
193
    let use_names = settings.bKohaColumnsUseNames;
194
    let included_columns = [];
195
    if (table_settings) {
196
        if (use_names) {
197
            // bKohaColumnsUseNames is set, identify columns by their data-colname
198
            included_columns = table_settings.columns
199
                .filter(c => !c.cannot_be_toggled)
200
                .map(c => "[data-colname='%s']".format(c.columnname))
201
                .join(",");
202
        } else {
203
            // Not set, columns are ordered the same than in the columns settings
204
            included_columns = table_settings.columns
205
                .map((c, i) => (!c.cannot_be_toggled ? i : null))
206
                .filter(i => i !== null);
207
        }
208
    }
209
    if( included_columns.length > 0 ){
210
        buttons.push(
211
            {
212
                extend: 'colvis',
213
                fade: 100,
214
                columns: included_columns,
215
                className: "columns_controls",
216
                titleAttr: __("Columns settings"),
217
                text: '<i class="fa fa-lg fa-gear" aria-hidden="true"></i> <span class="dt-button-text">' + _("Columns") + '</span>',
218
                exportOptions: {
219
                    columns: exportColumns
220
                }
221
            }
222
        );
223
    }
224
225
    buttons.push(
226
        {
227
            extend: 'collection',
228
            autoClose: true,
229
            fade: 100,
230
            className: "export_controls",
231
            titleAttr: __("Export or print"),
232
            text: '<i class="fa fa-lg fa-download"></i> <span class="dt-button-text">' + __("Export") + '</span>',
233
            buttons: export_buttons
234
        }
235
    );
236
237
    return buttons;
238
}
239
240
function _dt_visibility(table_settings, table_dt){
241
    let hidden_ids = [];
242
    if ( table_settings ) {
243
        var columns_settings = table_settings.columns;
244
        let i = 0;
245
        let use_names = $(table_dt.table().node()).data('bKohaColumnsUseNames');
246
        if ( use_names ) {
247
            let hidden_columns = table_settings.columns.filter(c => c.is_hidden);
248
            if (!hidden_columns.length) return [];
249
            table_dt.columns(hidden_columns.map(c => "[data-colname='%s']".format(c.columnname)).join(',')).every(function(){
250
                hidden_ids.push(this.index());
251
            });
252
        } else {
253
            $(columns_settings).each( function(i, c) {
254
                if ( c.is_hidden == '1' ) {
255
                    hidden_ids.push(i);
256
                }
257
            });
258
        }
259
    }
260
    return hidden_ids;
261
}
262
263
(function($) {
264
265
    /**
266
    * Create a new dataTables instance that uses the Koha RESTful API's as a data source
267
    * @param  {Object}  options                      Please see the dataTables settings documentation for further
268
    *                                                details
269
    * @param  {string}  [options.criteria=contains]  A koha specific extension to the dataTables settings block that
270
    *                                                allows setting the 'comparison operator' used in searches
271
    *                                                Supports `contains`, `starts_with`, `ends_with` and `exact` match
272
    * @param  {string}  [options.columns.*.type      Data type the field is stored in so we may impose some additional
273
    *                                                manipulation to search strings. Supported types are currenlty 'date'
274
    * @param  {Object}  table_settings               The arrayref as returned by TableSettings.GetTableSettings function
275
    *                                                available from the columns_settings template toolkit include
276
    * @return {Object}                               The dataTables instance
277
    */
278
    $.fn.kohaTable = function(options, table_settings){
279
        var settings = null;
280
281
        // Early return if the node does not exist
282
        if (!this.length) return;
283
284
        if(options) {
285
            // Don't redefine the default initComplete
286
            if ( options.initComplete ) {
287
                let our_initComplete = options.initComplete;
288
                options.initComplete = function(settings, json){
289
                    our_initComplete(settings, json);
290
                    dataTablesDefaults.initComplete(settings, json)
291
                };
292
            }
293
294
            settings = $.extend(true, {}, dataTablesDefaults, {
295
                        "paging": true,
296
                        'searching': true,
297
                        'language': {
298
                            'emptyTable': (options.emptyTable) ? options.emptyTable : __("No data available in table")
299
                        },
300
                    }, options);
301
302
        }
303
304
        settings["buttons"] = _dt_buttons({settings, table_settings});
305
306
        if ( table_settings ) {
307
            if ( table_settings.hasOwnProperty('default_display_length') && table_settings['default_display_length'] != null ) {
308
                settings["pageLength"] = table_settings['default_display_length'];
309
            }
310
            if ( table_settings.hasOwnProperty('default_sort_order') && table_settings['default_sort_order'] != null ) {
311
                settings["order"] = [[ table_settings['default_sort_order'], 'asc' ]];
312
            }
313
        }
314
315
        var default_column_defs = [
316
            { "aTargets": ["string-sort"], "sType": "string" },
317
            { "aTargets": ["anti-the"], "sType": "anti-the" },
318
            { "aTargets": ["NoSort"], "bSortable": false, "bSearchable": false }
319
        ];
320
321
        $(this).data('bKohaColumnsUseNames', settings.bKohaColumnsUseNames);
322
        var table = $(this).dataTable(settings);
323
324
        var table_dt = table.DataTable();
325
326
        table_dt.on( 'search.dt', function ( e, settings ) {
327
            // When the DataTables search function is triggered,
328
            // enable or disable the "Clear filter" button based on
329
            // the presence of a search string
330
            toggledClearFilter(table_dt.search(), settings.nTable.id);
331
        });
332
333
        let hidden_ids = _dt_visibility(table_settings, table_dt);
334
        table_dt.on("column-visibility.dt", function () {
335
            if (typeof columnsInit == 'function') {
336
                // This function can be created separately and used to trigger
337
                // an event after the DataTable has loaded AND column visibility
338
                // has been updated according to the table's configuration
339
                columnsInit();
340
            }
341
        }).columns(hidden_ids).visible(false);
342
343
344
        return table;
345
    };
346
347
})(jQuery);

Return to bug 38255