attribute_table_column_filter: take over column width in input elements

[cxcandid]

The attribute_table_column_filter.js plugin is a highly appreciated extension of LIZMAP. It makes filtering so much easier.

But there is one small issue: The plugin doesn't take over the width of the columns. It uses fixed width for every input element.

Here's an adapted version that takes column width into account:

lizMap.events.on({
    attributeLayerContentReady: function (e) {
        var cleanLayerName = lizMap.cleanName(e.featureType);

        if ($('#attribute-layer-table-' + cleanLayerName + '_wrapper').data('filtersON') === undefined) {
            // Set flag to add filters only once
            $('#attribute-layer-table-' + cleanLayerName + '_wrapper').data('filtersON', true);

            $('#attribute-layer-table-' + cleanLayerName + '_wrapper thead:first th').not('.sorting_disabled').each(function () {
                var title = $(this).text();
                var width = $(this).width();
                $(this).html('<input type="text" placeholder=" ' + title + '" style="width:' + (parseFloat(width)+20) + 'px" />');
            });

            $('#attribute-layer-table-' + cleanLayerName).DataTable().columns().every(function () {
                var column = this;

                $('input', this.header()).on('keyup change', function () {
                    if (column.search() !== this.value) {
                        column
                            .search(this.value)
                            .draw();
                    }
                }).click(function (e) {
                    // We don't want to sort when users click on the search field
                    e.stopPropagation();
                });
            });
            lizMap.refreshDatatableSize("#attribute-layer-main-" + cleanLayerName);
        }
    }
});