diff --git a/docs/ColumnSearch.js b/docs/ColumnSearch.js
new file mode 100644
index 00000000000..bafe737a09b
--- /dev/null
+++ b/docs/ColumnSearch.js
@@ -0,0 +1,35 @@
+// adapted from https://datatables.net/examples/api/multi_filter_select.html
+class ColumnSearch {
+
+ #column;
+ #select;
+
+ constructor(column) {
+ this.#column = column;
+ const clazz = this;
+ $('
').appendTo($(this.#column.header()));
+ this.#select = $('')
+ .appendTo($(this.#column.header()))
+ .on(
+ 'change',
+ function () {
+ const val = $.fn.dataTable.util.escapeRegex($(this).val());
+ clazz.#column
+ .search(val ? '^' + val + '$' : '', true, false)
+ .draw();
+ });
+ }
+
+ columnContentUpdated() {
+ this.#select.empty();
+ this.#select.append('');
+ const clazz = this;
+ this.#column
+ .data()
+ .unique()
+ .sort()
+ .each(function (d, _) {
+ clazz.#select.append('');
+ });
+ }
+}
\ No newline at end of file
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 2682004cbd1..ec29179045a 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -21,6 +21,7 @@
+
diff --git a/docs/batchCodeTable.js b/docs/batchCodeTable.js
index f1415aaaada..037d0ca83dc 100644
--- a/docs/batchCodeTable.js
+++ b/docs/batchCodeTable.js
@@ -4,6 +4,7 @@ class BatchCodeTableInitializer {
#countrySelect;
#batchCodeTableElement;
#batchCodeTable;
+ #columnSearch;
constructor({ heading, countrySelect, batchCodeTableElement }) {
this.#heading = heading;
@@ -13,6 +14,7 @@ class BatchCodeTableInitializer {
initialize() {
this.#batchCodeTable = this.#createEmptyBatchCodeTable();
+ this.#columnSearch = new ColumnSearch(this.#batchCodeTable.column(this.#getColumnIndex('Company')));
this.#countrySelect.addEventListener('change', event => this.#displayCountry(event.target.value));
this.#displayCountry('Global');
this.#initializeHistogramView();
@@ -104,7 +106,7 @@ class BatchCodeTableInitializer {
})
.then(json => {
this.#setTableRows(json.data);
- this.#makeCompanyColumnSearchable();
+ this.#columnSearch.columnContentUpdated();
this.#selectInput();
this.#displayControlColumn(country == 'Global');
});
@@ -122,27 +124,6 @@ class BatchCodeTableInitializer {
.draw();
}
- #makeCompanyColumnSearchable() {
- // adapted from https://datatables.net/examples/api/multi_filter_select.html
- const companyColumn = this.#batchCodeTable.column(this.#getColumnIndex('Company'));
- const select = $('')
- .appendTo($(companyColumn.header()))
- .on('change', function () {
- const val = $.fn.dataTable.util.escapeRegex($(this).val());
- companyColumn
- .search(val ? '^' + val + '$' : '', true, false)
- .draw();
- });
-
- companyColumn
- .data()
- .unique()
- .sort()
- .each(function (d, _) {
- select.append('');
- });
- }
-
#selectInput() {
const input = document.querySelector(".dataTables_filter input");
input.focus();