Display Data in Blade:
@foreach ($items as $item)
<div class="item">{{ $item }}</div>
@endforeach
Add a Button or Link for Sorting:
Add a button or link that the user can click to trigger the sorting:
<button id="sortItemsBtn">Sort Items</button>
JavaScript Code for Sorting:
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('sortItemsBtn').addEventListener('click', function () {
// Select all item elements and convert them to an array
var itemElements = Array.from(document.querySelectorAll('.item'));
// Sort the items alphabetically
itemElements.sort(function (a, b) {
var textA = a.innerText.toLowerCase();
var textB = b.innerText.toLowerCase();
return textA.localeCompare(textB);
});
// Append the sorted items back to the container
var container = document.querySelector('.items-container');
container.innerHTML = ''; // Clear the container
itemElements.forEach(function (itemElement) {
container.appendChild(itemElement);
});
});
});
</script>
This script selects all elements with the class item, converts them to an array, sorts them alphabetically, and then appends them back to their container.
Make sure to adapt the class names and HTML structure based on your actual Blade file. This is a basic example, and depending on your specific use case, you might need to adjust the code accordingly.
jquery Code for Sorting
<script>
$(document).ready(function () {
$('#sortItemsBtn').click(function () {
// Select all item elements and convert them to an array
var itemElements = $('.item').get();
// Sort the items alphabetically
itemElements.sort(function (a, b) {
var textA = $(a).text().toLowerCase();
var textB = $(b).text().toLowerCase();
return textA.localeCompare(textB);
});
// Append the sorted items back to the container
var container = $('.items-container');
container.empty(); // Clear the container
$.each(itemElements, function (index, itemElement) {
container.append(itemElement);
});
});
});
</script>
============jquery code===========================
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
// Select the filter input
var filterInput = $('#filterInput');
// Select all item elements
var itemElements = $('.item');
// Attach an event listener to the filter input
filterInput.on('input', function () {
// Get the filter text from the input
var filterText = filterInput.val().toLowerCase();
// Show or hide items based on the filter text
itemElements.each(function () {
var itemText = $(this).text().toLowerCase();
if (itemText.includes(filterText)) {
$(this).css('display', 'block');
} else {
$(this).css('display', 'none');
}
});
});
});
</script>
Practical Example
In blade file add input filter
<div class="container mt-5" style="margin-right:90px">
<div class="card">
<div class="card-body">
<h5 class="font-weight-bold text-danger">Filter by Status</h5>
<table class="table mt-2" id="orderTable">
<span id="completion-message" style="color:black;" aria-hidden="true"></span>
<thead>
<tr>
<th class="sortable" data-sort="publisher">Publisher name (sort by) <span id="publisherSortIndicator">↕</span></th>
<th class="sortable" data-sort="status">Influencer Name (sort by) <span id="publisherSortIndicator">↕</span></th>
<th>Cart Id</th>
<th class="sortable" data-sort="status">Status (sort by) <span id="publisherSortIndicator">↕</span></th>
<th>Amount</th>
<th class="sortable" data-sort="status">paydate (sort by) <span id="publisherSortIndicator">↕</span></th>
</tr>
</thead>
<tbody id="tableBody">
@foreach($total_order as $user)
<tr data-status="{{ strtolower($user->status) }}">
<td>{{ $user->user_name }}</td>
<td>{{ $user->slug }}</td>
<td>{{ strlen($user->order_cart_id) > 10 ? substr($user->order_cart_id, 0, 10) . '...' : $data->order_cart_id }}</td>
<td>{{ $user->status }}</td>
<td>{{ $user->pay_amount }}</td>
<td>{{ $user->order_pay_date }}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
In jquery
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
console.log("data is coming");
// Select all table rows
var tableRows = $('#tableBody tr');
// Select the table and table body
var orderTable = $('#orderTable');
var tableBody = $('#tableBody');
// Event listener for sorting by Publisher name or Status
$('.sortable').click(function () {
var column = $(this).data('sort');
sortTable(column);
});
// Function to sort the table based on the specified column
function sortTable(column) {
var rows = tableBody.find('tr').get();
rows.sort(function (a, b) {
var keyA = $(a).children('td').eq(getColumnIndex(column)).text().toUpperCase();
var keyB = $(b).children('td').eq(getColumnIndex(column)).text().toUpperCase();
return keyA.localeCompare(keyB);
});
$.each(rows, function (index, row) {
tableBody.append(row);
});
}
// Function to get the index of the specified column
function getColumnIndex(column) {
return $('#orderTable th[data-sort="' + column + '"]').index();
}
});
</script>
output
before click
after click
Summary
Inside table four header with sortable icon
get table body and tbody using id
Event listener for sorting by Publisher name or Status when u click header text based on class
get particular header text based on $this when we click and call function
Get all rows in the table body using find
Sort the rows based on the specified column
Extract the text content of the specified column for comparison
Append the sorted rows back to the table body
Top comments (0)