Streamline data tables

public/viewjs/batteries.js

@@ -1,4 +1,24 @@
-$(document).on('click', '.battery-delete-button', function(e)
+var batteriesTable = $('#batteries-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization'))
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	batteriesTable.search(value).draw();
+});
+
+$(document).on('click', '.battery-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-battery-name');
 	var objectId = $(e.currentTarget).attr('data-battery-id');
@@ -33,12 +53,3 @@
 		}
 	});
 });
-
-$('#batteries-table').DataTable({
-	'bPaginate': false,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/batteriesoverview.js

@@ -1,5 +1,5 @@
-$('#batteries-overview-table').DataTable({
+var batteriesOverviewTable = $('#batteries-overview-table').DataTable({
-	'bPaginate': false,
+	'paginate': false,
 	'order': [[2, 'desc']],
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
@@ -7,6 +7,17 @@
 	'language': JSON.parse(L('datatables_localization'))
 });
 
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	batteriesOverviewTable.search(value).draw();
+});
+
 $(document).on('click', '.track-charge-cycle-button', function(e)
 {
 	var batteryId = $(e.currentTarget).attr('data-battery-id');

public/viewjs/habits.js

@@ -1,4 +1,24 @@
-$(document).on('click', '.habit-delete-button', function(e)
+var habitsTable  = $('#habits-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization'))
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	habitsTable.search(value).draw();
+});
+
+$(document).on('click', '.habit-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-habit-name');
 	var objectId = $(e.currentTarget).attr('data-habit-id');
@@ -33,12 +53,3 @@
 		}
 	});
 });
-
-$('#habits-table').DataTable({
-	'bPaginate': false,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/habitsoverview.js

@@ -1,5 +1,5 @@
-$('#habits-overview-table').DataTable({
+var habitsOverviewTable = $('#habits-overview-table').DataTable({
-	'bPaginate': false,
+	'paginate': false,
 	'order': [[2, 'desc']],
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
@@ -7,6 +7,17 @@
 	'language': JSON.parse(L('datatables_localization'))
 });
 
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	habitsOverviewTable.search(value).draw();
+});
+
 $(document).on('click', '.track-habit-button', function(e)
 {
 	var habitId = $(e.currentTarget).attr('data-habit-id');

public/viewjs/locations.js

@@ -1,4 +1,24 @@
-$(document).on('click', '.location-delete-button', function(e)
+var locationsTable = $('#locations-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization'))
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	locationsTable.search(value).draw();
+});
+
+$(document).on('click', '.location-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-location-name');
 	var objectId = $(e.currentTarget).attr('data-location-id');
@@ -33,12 +53,3 @@
 		}
 	});
 });
-
-$('#locations-table').DataTable({
-	'bPaginate': false,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/manageapikeys.js

@@ -1,4 +1,30 @@
-$(document).on('click', '.apikey-delete-button', function(e)
+var apiKeysTable = $('#apikeys-table').DataTable({
+	'paginate': false,
+	'order': [[4, 'desc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization'))
+});
+
+var createdApiKeyId = GetUriParam('CreatedApiKeyId');
+if (createdApiKeyId !== undefined)
+{
+	$('#apiKeyRow_' + createdApiKeyId).effect('highlight', {}, 3000);
+}
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	apiKeysTable.search(value).draw();
+});
+
+$(document).on('click', '.apikey-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-apikey-apikey');
 	var objectId = $(e.currentTarget).attr('data-apikey-id');
@@ -33,18 +59,3 @@
 		}
 	});
 });
-
-$('#apikeys-table').DataTable({
-	'bPaginate': false,
-	'order': [[4, 'desc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});
-
-var createdApiKeyId = GetUriParam('CreatedApiKeyId');
-if (createdApiKeyId !== undefined)
-{
-	$('#apiKeyRow_' + createdApiKeyId).effect('highlight', { }, 3000);
-}

public/viewjs/products.js

@@ -1,4 +1,24 @@
-$(document).on('click', '.product-delete-button', function(e)
+var productsTable = $('#products-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization'))
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	productsTable.search(value).draw();
+});
+
+$(document).on('click', '.product-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-product-name');
 	var objectId = $(e.currentTarget).attr('data-product-id');
@@ -33,12 +53,3 @@
 		}
 	});
 });
-
-$('#products-table').DataTable({
-	'bPaginate': false,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/quantityunits.js

@@ -1,4 +1,24 @@
-$(document).on('click', '.quantityunit-delete-button', function(e)
+var quantityUnitsTable = $('#quantityunits-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization'))
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	quantityUnitsTable.search(value).draw();
+});
+
+$(document).on('click', '.quantityunit-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-quantityunit-name');
 	var objectId = $(e.currentTarget).attr('data-quantityunit-id');
@@ -33,12 +53,3 @@
 		}
 	});
 });
-
-$('#quantityunits-table').DataTable({
-	'bPaginate': false,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/shoppinglist.js

@@ -1,4 +1,24 @@
-$(document).on('click', '.shoppinglist-delete-button', function(e)
+var shoppingListTable = $('#shoppinglist-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization'))
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	shoppingListTable.search(value).draw();
+});
+
+$(document).on('click', '.shoppinglist-delete-button', function (e)
 {
 	Grocy.Api.Get('delete-object/shopping_list/' + $(e.currentTarget).attr('data-shoppinglist-id'),
 		function(result)
@@ -25,12 +45,3 @@ $(document).on('click', '#add-products-below-min-stock-amount', function(e)
 		}
 	);
 });
-
-$('#shoppinglist-table').DataTable({
-	'bPaginate': false,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/stockoverview.js

@@ -5,7 +5,8 @@
 		{ 'orderable': false, 'targets': 0 },
 		{ 'visible': false, 'targets': 4 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#location-filter").on("change", function()

views/batteries.blade.php

@@ -12,6 +12,15 @@
 	</a>
 </h1>
 
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
+
 <div class="table-responsive">
 	<table id="batteries-table" class="table table-striped">
 		<thead>

views/batteriesoverview.blade.php

@@ -16,9 +16,14 @@
 		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 batteries are due to be charged within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
 		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 batteries are overdue to be charged', $countOverdue) }}</p>
 	</div>
-</div>
-
 	<div class="discrete-content-separator-2x"></div>
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
 
 <div class="table-responsive">
 	<table id="batteries-overview-table" class="table table-striped">

views/habits.blade.php

@@ -12,6 +12,15 @@
 	</a>
 </h1>
 
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
+
 <div class="table-responsive">
 	<table id="habits-table" class="table table-striped">
 		<thead>

views/habitsoverview.blade.php

@@ -16,9 +16,14 @@
 		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 habits are due to be done within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
 		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 habits are overdue to be done', $countOverdue) }}</p>
 	</div>
-</div>
-
 	<div class="discrete-content-separator-2x"></div>
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
 
 <div class="table-responsive">
 	<table id="habits-overview-table" class="table table-striped">

views/locations.blade.php

@@ -12,6 +12,15 @@
 	</a>
 </h1>
 
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
+
 <div class="table-responsive">
 	<table id="locations-table" class="table table-striped">
 		<thead>

views/manageapikeys.blade.php

@@ -18,6 +18,15 @@
 
 <p class="lead"><a href="{{ $U('/api') }}" target="_blank">{{ $L('REST API & data model documentation') }}</a></p>
 
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
+
 <div class="table-responsive">
 	<table id="apikeys-table" class="table table-striped">
 		<thead>

views/products.blade.php

@@ -12,6 +12,15 @@
 	</a>
 </h1>
 
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
+
 <div class="table-responsive">
 	<table id="products-table" class="table table-striped">
 		<thead>

views/quantityunits.blade.php

@@ -12,6 +12,15 @@
 	</a>
 </h1>
 
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
+
 <div class="table-responsive">
 	<table id="quantityunits-table" class="table table-striped">
 		<thead>

views/shoppinglist.blade.php

@@ -15,6 +15,15 @@
 	</a>
 </h1>
 
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
+</div>
+
 <div class="table-responsive">
 	<table id="shoppinglist-table" class="table table-striped">
 		<thead>