Added filter for /Home/Assets

This commit is contained in:
2025-10-12 20:53:50 +02:00
parent e8065b4976
commit 5ef02d2899

View File

@@ -26,7 +26,14 @@
<th>@T["Asset ID"]</th> <th>@T["Asset ID"]</th>
<th>@T["Asset Name"]</th> <th>@T["Asset Name"]</th>
<th>@T["Location"]</th> <th>@T["Location"]</th>
<th>@T["Action"]</th> <th class="text-center">@T["Action"]</th>
</tr>
<tr>
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Owner"]" data-column="0" /></th>
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset ID"]" data-column="1" /></th>
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset Name"]" data-column="2" /></th>
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Location"]" data-column="3" /></th>
<th class="text-center">-</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -39,7 +46,7 @@
<td>@assetsTableViewModel.AssetName</td> <td>@assetsTableViewModel.AssetName</td>
<td>@assetsTableViewModel.LocationName</td> <td>@assetsTableViewModel.LocationName</td>
<td> <td>
<div class="d-flex gap-2"> <div class="d-flex gap-2 justify-content-center">
<button class="btn btn-sm btn-warning btn-update" <button class="btn btn-sm btn-warning btn-update"
data-asset-id="@assetsTableViewModel.AssetCn" data-asset-id="@assetsTableViewModel.AssetCn"
data-bs-toggle="modal" data-bs-toggle="modal"
@@ -62,6 +69,35 @@
</div> </div>
</div> </div>
<!-- Table filter -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const filters = document.querySelectorAll('.column-filter');
const table = document.querySelector('table');
const tbody = table.querySelector('tbody');
filters.forEach(filter => {
filter.addEventListener('input', () => {
const rows = tbody.querySelectorAll('tr');
const filterValues = Array.from(filters).map(f => f.value.toLowerCase().trim());
rows.forEach(row => {
const cells = row.querySelectorAll('td');
let visible = true;
filterValues.forEach((val, i) => {
if (val && !cells[i].textContent.toLowerCase().includes(val)) {
visible = false;
}
});
row.style.display = visible ? '' : 'none';
});
});
});
});
</script>
<!-- Asset Delete Confirmation Modal --> <!-- Asset Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true"> <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">