keep filter on table wide inserts

src/main/resources/templates/business/bookings.html

@@ -37,6 +37,7 @@
 								<td class="middled" th:text="${b.role}"></td>
 								<td class="middled">
 									<form action="#" th:action="@{'/business/bookings/payment/' + ${b.pk}}" th:object="${addBean}" method="post">
+										<input th:id="'searchfield' + ${b.pk}" type="text" th:name="search" />
 										<div class="container">
 											<div class="row">
 												<div class="col-sm-4" style="text-align: right">
@@ -46,7 +47,7 @@
 													<input type="number" step="0.01" class="form-control" th:field="*{payment}" />
 												</div>
 												<div class="col-sm-4">
-													<input type="submit" class="btn btn-outline-primary" style="padding: 4px" value="einzahlen" />
+													<input type="submit" class="btn btn-outline-primary" th:onclick="'setSearchField(' + ${b.pk} + ')'" style="padding: 4px" value="einzahlen" />
 												</div>
 											</div>
 										</div>
@@ -58,12 +59,23 @@
 						</th:block>
 					</tbody>
 				</table>
-				<script>
+				<script th:inline="javascript">
+				/*<![CDATA[*/
+					var searchValue = /*[[${search}]]*/ '';
+
 					$(document).ready(function() {
 						$("#bookers").DataTable({
-							language : locale_de
+							language : locale_de,
+							search : {
+								search : searchValue
+							}
 						});
 					});
+
+					function setSearchField(x) {
+						$("#searchfield" + x).val($("#bookers").DataTable().search());
+					}
+				/*]]>*/
 				</script>
 			</div>
 		</div>