From: Marcin Haba <marcin.haba@bacula.pl>
Date: Sun, 17 Nov 2019 21:29:46 +0000 (+0100)
Subject: baculum: Add table filters
X-Git-Tag: Release-9.6.0~71
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d577680f7f3469bc110b1262024e9a93b7cbea13;p=thirdparty%2Fbacula.git

baculum: Add table filters
---

diff --git a/gui/baculum/protected/Web/JavaScript/misc.js b/gui/baculum/protected/Web/JavaScript/misc.js
index 7095262b5..d73b25170 100644
--- a/gui/baculum/protected/Web/JavaScript/misc.js
+++ b/gui/baculum/protected/Web/JavaScript/misc.js
@@ -1044,6 +1044,12 @@ function handle_touch_move(e, callbacks) {
 	touch_start_y = null;
 }
 
+function sort_natural(a, b) {
+	a = a.toString();
+	b = b.toString();
+	return a.localeCompare(b, undefined, {numeric: true});
+}
+
 $(function() {
 	W3SideBar.init();
 	set_sbbr_compatibility();
diff --git a/gui/baculum/protected/Web/Pages/ClientList.page b/gui/baculum/protected/Web/Pages/ClientList.page
index ecb1c9c6c..eb3d238a1 100644
--- a/gui/baculum/protected/Web/Pages/ClientList.page
+++ b/gui/baculum/protected/Web/Pages/ClientList.page
@@ -23,8 +23,19 @@
 					<th><%[ Actions ]%></th>
 				</tr>
 			</thead>
-			<tbody id="client_list_body">
-			</tbody>
+			<tbody id="client_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th>ClientId</th>
+					<th><%[ Name ]%></th>
+					<th><%[ Uname ]%></th>
+					<th><%[ AutoPrune ]%></th>
+					<th><%[ Job retention ]%></th>
+					<th><%[ File retention ]%></th>
+					<th><%[ Actions ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 <script type="text/javascript">
@@ -60,7 +71,7 @@ var oClientList = {
 					data: 'jobretention',
 					render: function (data, type, row) {
 						var ret;
-						if (type == 'display') {
+						if (type == 'display' || type == 'filter') {
 							var time = Units.format_time_period(data);
 							ret = time.value + ' ' + time.format + ((time.value > 0) ? 's': '');
 						} else {
@@ -73,7 +84,7 @@ var oClientList = {
 					data: 'fileretention',
 					render: function (data, type, row) {
 						var ret;
-						if (type == 'display') {
+						if (type == 'display' || type == 'filter') {
 							var time = Units.format_time_period(data);
 							ret = time.value + ' ' + time.format + ((time.value > 0) ? 's': '');
 						} else {
@@ -113,7 +124,35 @@ var oClientList = {
 				className: "dt-center",
 				targets: [ 1, 4, 5, 6, 7 ]
 			}],
-			order: [2, 'asc']
+			order: [2, 'asc'],
+			initComplete: function () {
+				this.api().columns([2, 3, 4, 5, 6]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 5 || column[0][0] == 6) {
+						column.data().unique().sort(sort_natural).each(function (d, j) {
+							var time = Units.format_time_period(d);
+							var time_f = time.value + ' ' + time.format + ((time.value > 0) ? 's': '');
+							select.append('<option value="' + time_f + '">' + time_f + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							if (d) {
+								select.append('<option value="' + d + '">' + d + '</option>');
+							}
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/ClientView.page b/gui/baculum/protected/Web/Pages/ClientView.page
index 5319b9269..6483620ce 100644
--- a/gui/baculum/protected/Web/Pages/ClientView.page
+++ b/gui/baculum/protected/Web/Pages/ClientView.page
@@ -526,8 +526,22 @@ oGraphicalClientStatus.init();
 					<th class="w3-center"><%[ Action ]%></th>
 				</tr>
 			</thead>
-			<tbody id="job_for_client_list_body">
-			</tbody>
+			<tbody id="job_for_client_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th><%[ JobId ]%></th>
+					<th><%[ Name ]%></th>
+					<th><%[ Type ]%></th>
+					<th class="w3-center"><%[ Level ]%></th>
+					<th class="w3-center"><%[ Start time ]%></th>
+					<th class="w3-center"><%[ End time ]%></th>
+					<th class="w3-center"><%[ Job status ]%></th>
+					<th class="w3-center"><%[ Size ]%></th>
+					<th class="w3-center"><%[ Files ]%></th>
+					<th class="w3-center"><%[ Action ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 <script type="text/javascript">
@@ -639,7 +653,31 @@ var oJobForClientList = {
 				className: "dt-body-right",
 				targets: [ 8 ]
 			}],
-			order: [1, 'desc']
+			order: [1, 'desc'],
+			initComplete: function () {
+				this.api().columns([2, 3, 4, 7]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 7) {
+						column.data().unique().sort().each(function (d, j) {
+							select.append('<option value="' + d + '" title="' + JobStatus.get_desc(d) + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/FileSetList.page b/gui/baculum/protected/Web/Pages/FileSetList.page
index 5a8a639e1..31a579a08 100644
--- a/gui/baculum/protected/Web/Pages/FileSetList.page
+++ b/gui/baculum/protected/Web/Pages/FileSetList.page
@@ -20,6 +20,14 @@
 				</tr>
 			</thead>
 			<tbody id="fileset_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th><%[ Name ]%></th>
+					<th><%[ Director ]%></th>
+					<th class="w3-center"><%[ Actions ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 <script type="text/javascript">
@@ -75,7 +83,25 @@ var oFileSetList = {
 				className: "dt-center",
 				targets: [ 3 ]
 			}],
-			order: [1, 'asc']
+			order: [1, 'asc'],
+			initComplete: function () {
+				this.api().columns([1, 2]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+						select.append('<option value="' + d + '">' + d + '</option>');
+					});
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/JobHistoryList.page b/gui/baculum/protected/Web/Pages/JobHistoryList.page
index d276a51f4..5892818cb 100644
--- a/gui/baculum/protected/Web/Pages/JobHistoryList.page
+++ b/gui/baculum/protected/Web/Pages/JobHistoryList.page
@@ -34,8 +34,22 @@
 					<th class="w3-center"><%[ Action ]%></th>
 				</tr>
 			</thead>
-			<tbody id="job_list_body">
-			</tbody>
+			<tbody id="job_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th><%[ JobId ]%></th>
+					<th><%[ Name ]%></th>
+					<th><%[ Type ]%></th>
+					<th class="w3-center"><%[ Level ]%></th>
+					<th class="w3-center"><%[ Start time ]%></th>
+					<th class="w3-center"><%[ End time ]%></th>
+					<th class="w3-center"><%[ Job status ]%></th>
+					<th class="w3-center"><%[ Size ]%></th>
+					<th class="w3-center"><%[ Files ]%></th>
+					<th class="w3-center"><%[ Action ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 	<com:Application.Web.Portlets.RunJob ID="RunJobModal" />
@@ -112,22 +126,11 @@ var oJobList = {
 					data: 'jobid',
 					render: function (data, type, row) {
 						var container = document.createElement('DIV');
-
-						// job details button
-						var btn = document.createElement('BUTTON');
-						btn.className = 'w3-button w3-green w3-right';
-						btn.type = 'button';
-						var i = document.createElement('I');
-						i.className = 'fa fa-list-ul';
-						btn.title = '<%[ Details ]%>';
-						btn.appendChild(i);
-						btn.innerHTML += '&nbsp';
-						btn.setAttribute('onclick', "document.location.href = '/web/job/history/" + data + "/'");
-						container.appendChild(btn);
+						var btn, i;
 						if (['C', 'R'].indexOf(row.jobstatus) === -1) {
 							// rerun job button
 							btn = document.createElement('BUTTON');
-							btn.className = 'w3-button w3-green w3-right';
+							btn.className = 'w3-button w3-green';
 							btn.type = 'button';
 							i = document.createElement('I');
 							btn.title = '<%[ Run job again ]%>';
@@ -137,7 +140,7 @@ var oJobList = {
 						} else {
 							// cancel job button
 							btn = document.createElement('BUTTON');
-							btn.className = 'w3-button w3-green w3-right';
+							btn.className = 'w3-button w3-green';
 							btn.type = 'button';
 							i = document.createElement('I');
 							btn.title = '<%[ Cancel job ]%>';
@@ -146,6 +149,20 @@ var oJobList = {
 							btn.setAttribute('onclick', 'cancel_job_callback.setCallbackParameter(' + data + '); cancel_job_callback.dispatch();');
 						}
 						container.appendChild(btn);
+						var space = document.createTextNode(' ');
+						container.appendChild(space);
+
+						// job details button
+						btn = document.createElement('BUTTON');
+						btn.className = 'w3-button w3-green';
+						btn.type = 'button';
+						i = document.createElement('I');
+						i.className = 'fa fa-list-ul';
+						btn.title = '<%[ Details ]%>';
+						btn.appendChild(i);
+						btn.innerHTML += '&nbsp';
+						btn.setAttribute('onclick', "document.location.href = '/web/job/history/" + data + "/'");
+						container.appendChild(btn);
 						return container.outerHTML;
 					}
 				}
@@ -173,7 +190,31 @@ var oJobList = {
 				className: "dt-body-right",
 				targets: [ 8 ]
 			}],
-			order: [1, 'desc']
+			order: [1, 'desc'],
+			initComplete: function () {
+				this.api().columns([2, 3, 4, 7]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 7) {
+						column.data().unique().sort().each(function (d, j) {
+							select.append('<option value="' + d + '" title="' + JobStatus.get_desc(d) + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/JobList.page b/gui/baculum/protected/Web/Pages/JobList.page
index 2ee682608..75fac8cfe 100644
--- a/gui/baculum/protected/Web/Pages/JobList.page
+++ b/gui/baculum/protected/Web/Pages/JobList.page
@@ -27,8 +27,15 @@
 					<th><%[ Actions ]%></th>
 				</tr>
 			</thead>
-			<tbody id="job_history_list_body">
-			</tbody>
+			<tbody id="job_history_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th><%[ Name ]%></th>
+					<th><%[ Director ]%></th>
+					<th><%[ Actions ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 	<com:Application.Web.Portlets.RunJob ID="RunJobModal" />
@@ -85,7 +92,25 @@ var oJobHistoryList = {
 				className: "dt-center",
 				targets: [ 3 ]
 			}],
-			order: [1, 'asc']
+			order: [1, 'asc'],
+			initComplete: function () {
+				this.api().columns([1, 2]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					column.data().unique().sort().each(function (d, j) {
+						select.append('<option value="' + d + '">' + d + '</option>');
+					});
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/JobView.page b/gui/baculum/protected/Web/Pages/JobView.page
index df44730cc..1bdc394f4 100644
--- a/gui/baculum/protected/Web/Pages/JobView.page
+++ b/gui/baculum/protected/Web/Pages/JobView.page
@@ -92,8 +92,22 @@
 					<th class="w3-center"><%[ Action ]%></th>
 				</tr>
 			</thead>
-			<tbody id="job_history_list_body">
-			</tbody>
+			<tbody id="job_history_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th><%[ JobId ]%></th>
+					<th><%[ Name ]%></th>
+					<th><%[ Type ]%></th>
+					<th class="w3-center"><%[ Level ]%></th>
+					<th class="w3-center"><%[ Start time ]%></th>
+					<th class="w3-center"><%[ End time ]%></th>
+					<th class="w3-center"><%[ Job status ]%></th>
+					<th class="w3-center"><%[ Size ]%></th>
+					<th class="w3-center"><%[ Files ]%></th>
+					<th class="w3-center"><%[ Action ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 <script type="text/javascript">
 var oJobHistoryList = {
@@ -204,7 +218,31 @@ var oJobHistoryList = {
 				className: "dt-body-right",
 				targets: [ 8 ]
 			}],
-			order: [1, 'desc']
+			order: [1, 'desc'],
+			initComplete: function () {
+				this.api().columns([3, 4, 7]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 7) {
+						column.data().unique().sort().each(function (d, j) {
+							select.append('<option value="' + d + '" title="' + JobStatus.get_desc(d) + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/PoolList.page b/gui/baculum/protected/Web/Pages/PoolList.page
index 5e5fb73d5..3c17b18aa 100644
--- a/gui/baculum/protected/Web/Pages/PoolList.page
+++ b/gui/baculum/protected/Web/Pages/PoolList.page
@@ -24,8 +24,20 @@
 					<th><%[ Actions ]%></th>
 				</tr>
 			</thead>
-			<tbody id="pool_list_body">
-			</tbody>
+			<tbody id="pool_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th>PoolId</th>
+					<th><%[ Name ]%></th>
+					<th><%[ No. vols ]%></th>
+					<th><%[ Max. vols ]%></th>
+					<th><%[ Vol. retention ]%></th>
+					<th><%[ AutoPrune ]%></th>
+					<th><%[ Recycle ]%></th>
+					<th><%[ Actions ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 <script type="text/javascript">
@@ -60,7 +72,7 @@ var oPoolList = {
 					data: 'volretention',
 					render: function (data, type, row) {
 						var ret;
-						if (type == 'display') {
+						if (type == 'display' || type == 'filter') {
 							var time = Units.format_time_period(data);
 							ret = time.value + ' ' + time.format + ((time.value > 0) ? 's': '');
 						} else {
@@ -112,7 +124,37 @@ var oPoolList = {
 				className: "dt-center",
 				targets: [ 1, 3, 4, 6, 7, 8 ]
 			}],
-			order: [2, 'asc']
+			order: [2, 'asc'],
+			initComplete: function () {
+				this.api().columns([2, 3, 4, 5, 6, 7]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if ([3, 4].indexOf(column[0][0]) !== -1) {
+						column.cells('', column[0]).render('display').unique().sort(sort_natural).each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					} else if (column[0][0] == 5) {
+						column.data().unique().sort(sort_natural).each(function (d, j) {
+							var time = Units.format_time_period(d);
+							var time_f = time.value + ' ' + time.format + ((time.value > 0) ? 's': '');
+							select.append('<option value="' + time_f + '">' + time_f + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/PoolView.page b/gui/baculum/protected/Web/Pages/PoolView.page
index a68fb04c4..bd6392481 100644
--- a/gui/baculum/protected/Web/Pages/PoolView.page
+++ b/gui/baculum/protected/Web/Pages/PoolView.page
@@ -132,8 +132,22 @@
 					<th><%[ Actions ]%></th>
 				</tr>
 			</thead>
-			<tbody id="volume_list_body">
-			</tbody>
+			<tbody id="volume_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th>MediaId</th>
+					<th><%[ Name ]%></th>
+					<th><%[ Slot ]%></th>
+					<th>InChanger</th>
+					<th><%[ Vol. status ]%></th>
+					<th>MediaType</th>
+					<th><%[ Last written ]%></th>
+					<th><%[ Vol. jobs ]%></th>
+					<th><%[ Vol. bytes ]%></th>
+					<th><%[ Actions ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 	<div class="w3-container tab_item" id="pool_config" style="display: none">
@@ -187,7 +201,7 @@ var oVolumeList = {
 					data: 'volbytes',
 					render: function (data, type, row) {
 						var s;
-						if (type == 'display') {
+						if (type == 'display' || type == 'filter') {
 							s = Units.get_formatted_size(data)
 						} else {
 							s = data;
@@ -230,7 +244,31 @@ var oVolumeList = {
 				className: "dt-body-right",
 				targets: [ 9 ]
 			}],
-			order: [3, 'asc']
+			order: [3, 'asc'],
+			initComplete: function () {
+				this.api().columns([2, 3, 4, 5, 6]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 3) {
+						column.cells('', column[0]).render('display').unique().sort(sort_natural).each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/RestoreWizard.page b/gui/baculum/protected/Web/Pages/RestoreWizard.page
index 37d09bc76..80e3122da 100644
--- a/gui/baculum/protected/Web/Pages/RestoreWizard.page
+++ b/gui/baculum/protected/Web/Pages/RestoreWizard.page
@@ -159,19 +159,34 @@
 				<p><%[ Backup for restore: ]%></p>
 				<table id="job_to_restore_list" style="width: 100%">
 					<thead>
-						<th></th>
-						<th>JobId</th>
-						<th><%[ Job name ]%></th>
-						<th><%[ Type ]%></th>
-						<th><%[ Level ]%></th>
-						<th><%[ Job status ]%></th>
-						<th><%[ Size ]%></th>
-						<th><%[ Files ]%></th>
-						<th><%[ End time ]%></th>
-						<th><%[ Select ]%></th>
+						<tr>
+							<th></th>
+							<th>JobId</th>
+							<th><%[ Job name ]%></th>
+							<th><%[ Type ]%></th>
+							<th><%[ Level ]%></th>
+							<th><%[ Job status ]%></th>
+							<th><%[ Size ]%></th>
+							<th><%[ Files ]%></th>
+							<th><%[ End time ]%></th>
+							<th><%[ Select ]%></th>
+						</tr>
 					</thead>
-					<tbody id="job_to_restore_list_body">
-					</tbody>
+					<tbody id="job_to_restore_list_body"></tbody>
+					<tfoot>
+						<tr>
+							<th></th>
+							<th>JobId</th>
+							<th><%[ Job name ]%></th>
+							<th><%[ Type ]%></th>
+							<th><%[ Level ]%></th>
+							<th><%[ Job status ]%></th>
+							<th><%[ Size ]%></th>
+							<th><%[ Files ]%></th>
+							<th><%[ End time ]%></th>
+							<th><%[ Select ]%></th>
+						</tr>
+					</tfoot>
 				</table>
 <script type="text/javascript">
 var oJobsToRestoreList = {
@@ -210,13 +225,19 @@ var oJobsToRestoreList = {
 					data: 'name',
 					responsivePriority: 3,
 					render: function(data, type, row) {
-						var i = document.createElement('I');
-						i.className = 'fa fa-external-link-alt fa-xs';
-						var a = document.createElement('A');
-						a.href = '/web/job/' + encodeURIComponent(data) + '/';
-						a.appendChild(i);
-						a.title = '<%[ Go to job %job ]%>'.replace('%job', data);
-						return (data + ' ' + a.outerHTML);
+						var ret;
+						if (type == 'display') {
+							var i = document.createElement('I');
+							i.className = 'fa fa-external-link-alt fa-xs';
+							var a = document.createElement('A');
+							a.href = '/web/job/' + encodeURIComponent(data) + '/';
+							a.appendChild(i);
+							a.title = '<%[ Go to job %job ]%>'.replace('%job', data);
+							ret = (data + ' ' + a.outerHTML);
+						} else {
+							ret = data;
+						}
+						return ret;
 					}
 				},
 				{
@@ -304,7 +325,31 @@ var oJobsToRestoreList = {
 				className: "dt-body-right",
 				targets: [ 6 ]
 			}],
-			order: [1, 'desc']
+			order: [1, 'desc'],
+			initComplete: function () {
+				this.api().columns([2, 4, 5]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] === 2 || column[0][0] == 5) {
+						column.data().unique().sort().each(function (d, j) {
+							select.append('<option value="' + d + '" title="' + JobStatus.get_desc(d) + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/StorageList.page b/gui/baculum/protected/Web/Pages/StorageList.page
index f5f8975c6..f6a3a5373 100644
--- a/gui/baculum/protected/Web/Pages/StorageList.page
+++ b/gui/baculum/protected/Web/Pages/StorageList.page
@@ -22,8 +22,16 @@
 					<th class="w3-center"><%[ Actions ]%></th>
 				</tr>
 			</thead>
-			<tbody id="storage_list_body">
-			</tbody>
+			<tbody id="storage_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th>StorageId</th>
+					<th><%[ Name ]%></th>
+					<th><%[ Autochanger ]%></th>
+					<th class="w3-center"><%[ Actions ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 <script type="text/javascript">
@@ -86,7 +94,25 @@ var oStorageList = {
 				className: "dt-center",
 				targets: [ 1, 3, 4 ]
 			}],
-			order: [1, 'asc']
+			order: [1, 'asc'],
+			initComplete: function () {
+				this.api().columns([2, 3]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+						select.append('<option value="' + d + '">' + d + '</option>');
+					});
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/VolumeList.page b/gui/baculum/protected/Web/Pages/VolumeList.page
index eb1a05608..72ba97ac2 100644
--- a/gui/baculum/protected/Web/Pages/VolumeList.page
+++ b/gui/baculum/protected/Web/Pages/VolumeList.page
@@ -26,8 +26,21 @@
 					<th><%[ Actions ]%></th>
 				</tr>
 			</thead>
-			<tbody id="pool_list_body">
-			</tbody>
+			<tbody id="pool_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th>MediaId</th>
+					<th><%[ Name ]%></th>
+					<th><%[ Slot ]%></th>
+					<th>InChanger</th>
+					<th><%[ Vol. status ]%></th>
+					<th>MediaType</th>
+					<th><%[ Last written ]%></th>
+					<th><%[ Vol. bytes ]%></th>
+					<th><%[ Actions ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 <script type="text/javascript">
@@ -111,7 +124,31 @@ var oVolumeList = {
 				className: "dt-body-right",
 				targets: [ 8 ]
 			}],
-			order: [3, 'asc']
+			order: [3, 'asc'],
+			initComplete: function () {
+				this.api().columns([2, 3, 4, 5, 6]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 3) {
+						column.cells('', column[0]).render('display').unique().sort(sort_natural).each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Pages/VolumeView.page b/gui/baculum/protected/Web/Pages/VolumeView.page
index 8fe0b5e8a..ab57219a6 100644
--- a/gui/baculum/protected/Web/Pages/VolumeView.page
+++ b/gui/baculum/protected/Web/Pages/VolumeView.page
@@ -168,8 +168,22 @@
 					<th class="w3-center"><%[ Action ]%></th>
 				</tr>
 			</thead>
-			<tbody id="jobs_on_volume_list_body">
-			</tbody>
+			<tbody id="jobs_on_volume_list_body"></tbody>
+			<tfoot>
+				<tr>
+					<th></th>
+					<th><%[ JobId ]%></th>
+					<th><%[ Name ]%></th>
+					<th><%[ Type ]%></th>
+					<th class="w3-center"><%[ Level ]%></th>
+					<th class="w3-center"><%[ Start time ]%></th>
+					<th class="w3-center"><%[ End time ]%></th>
+					<th class="w3-center"><%[ Job status ]%></th>
+					<th class="w3-center"><%[ Size ]%></th>
+					<th class="w3-center"><%[ Files ]%></th>
+					<th class="w3-center"><%[ Action ]%></th>
+				</tr>
+			</tfoot>
 		</table>
 	</div>
 	<div class="w3-container tab_item" id="volume_config" style="display: none">
@@ -447,7 +461,31 @@ var oJobsOnVolumeList = {
 				className: "dt-body-right",
 				targets: [ 8 ]
 			}],
-			order: [1, 'desc']
+			order: [1, 'desc'],
+			initComplete: function () {
+				this.api().columns([2, 3, 4, 7]).every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 7) {
+						column.data().unique().sort().each(function (d, j) {
+							select.append('<option value="' + d + '" title="' + JobStatus.get_desc(d) + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/protected/Web/Portlets/StatusSchedule.tpl b/gui/baculum/protected/Web/Portlets/StatusSchedule.tpl
index f4e2c6822..80a6df24b 100644
--- a/gui/baculum/protected/Web/Portlets/StatusSchedule.tpl
+++ b/gui/baculum/protected/Web/Portlets/StatusSchedule.tpl
@@ -96,8 +96,20 @@
 				<th><%[ Schedule ]%></th>
 			</tr>
 		</thead>
-		<tbody id="schedule_list_body">
-		</tbody>
+		<tbody id="schedule_list_body"></tbody>
+		<tfoot>
+			<tr>
+				<th></th>
+				<th><%[ Level ]%></th>
+				<th><%[ Type ]%></th>
+				<th><%[ Priority ]%></th>
+				<th><%[ Scheduled ]%></th>
+				<%=empty($this->Job) ? '<th>' . Prado::localize('Job name') . '</th>': ''%>
+				<th><%[ Client ]%></th>
+				<th><%[ FileSet ]%></th>
+				<th><%[ Schedule ]%></th>
+			</tr>
+		</tfoot>
 	</table>
 </div>
 <script type="text/javascript">
@@ -191,7 +203,31 @@ var oJobScheduleList = {
 				responsivePriority: 5,
 				targets: 2
 			}],
-			order: [4, 'asc']
+			order: [4, 'asc'],
+			initComplete: function () {
+				this.api().columns().every(function () {
+					var column = this;
+					var select = $('<select><option value=""></option></select>')
+					.appendTo($(column.footer()).empty())
+					.on('change', function () {
+						var val = $.fn.dataTable.util.escapeRegex(
+							$(this).val()
+						);
+						column
+						.search(val ? '^' + val + '$' : '', true, false)
+						.draw();
+					});
+					if (column[0][0] == 3) {
+						column.cells('', column[0]).render('display').unique().sort(sort_natural).each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					} else {
+						column.cells('', column[0]).render('display').unique().sort().each(function(d, j) {
+							select.append('<option value="' + d + '">' + d + '</option>');
+						});
+					}
+				});
+			}
 		});
 	}
 };
diff --git a/gui/baculum/themes/Baculum-v2/css/baculum.css b/gui/baculum/themes/Baculum-v2/css/baculum.css
index 7376fdd2d..496d14abd 100644
--- a/gui/baculum/themes/Baculum-v2/css/baculum.css
+++ b/gui/baculum/themes/Baculum-v2/css/baculum.css
@@ -23,6 +23,10 @@ th, table.dataTable thead td {
 	border-bottom: none !important;
 }
 
+table.dataTable tbody td {
+	vertical-align: middle;
+}
+
 table.dataTable.no-footer {
 	border-bottom: none !important;
 }
@@ -48,11 +52,12 @@ table.dataTable.no-footer {
 }
 
 th.action_col, td.action_col {
-	width: 90px !important;
+	width: 110px !important;
 }
 
 td.action_col button {
-	margin-right: 3px;
+	display: inline-block;
+	margin: 0 auto;
 }
 
 .hide {