I would like to make a filter using List.js. I have two simple buttons: "BUY" and "SELL" Ideally they should be used as reference to search into the value of a specific cell but I cannot make it work.
Here it is one of the objects:
"trade": "<span class=\"badge rounded-pill bg-danger text-white\">SELL</span>",
"date": "18/01/2022",
"price": "60",
"quantity": "10"
}
This is the code of the filter
$('.filter').click(function () {
var search = $(this).text().toUpperCase(); // val = SELL
featureList.filter(function (item) {
return item.values().trade.includes(search);
});
});
If I manually replace search with the value "SELL" in the includes() function, I get the result I'm expecting.. using the variable no..
Moreover is there a way to automatically select the column where to search? I've tried to add a data-filter attribute to the button and I managed to retreive the value but if I try the following code doesn't work
$('.filter').click(function () {
var col = $(this).data('filter'); // val = trade
featureList.filter(function (item) {
return item.values().col.includes('SELL');
});
});
Thank you for helping me to understand what I clearly do wrong
You were missing class="list" for the tbody element. This is necessary for list.js. Also your search variable had white spaces on each end due to the span element in the trade cells. By trimming the whitespaces your search variable can used in the includes() method.
$(function() {
var options = {
valueNames: ["trade", "date", "price", "quantity"]
};
var featureList = new List('tradesTable', options);
$('.filter').click(function () {
var search = $(this).text().toUpperCase();
featureList.filter(function (item) {
if(item.values().trade.includes(search.trim())){
return true;
} else {
return false;
}
});
});
$('.clear').click(function () {
featureList.filter()
})
});<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
<div id="tradesTable">
<button class="filter" data-filter="trade">
Buy
</button>
<button class="filter" data-filter="trade">
Sell
</button>
<button class="clear">
Clear
</button>
<table>
<thead>
<tr>
<th class="sort" data-sort="trade">Trade</th>
<th class="sort" data-sort="date">Date</th>
<th class="sort" data-sort="price">Price</th>
<th class="sort" data-sort="quantity">Quantity</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="trade">
<span class="badge rounded-pill bg-danger text-white">SELL</span>
</td>
<td class="date">18/01/2022</td>
<td class="price">60</td>
<td class="quantity">100</td>
</tr>
<tr>
<td class="trade">
<span class ="badge rounded-pill bg-danger text-white">BUY</span>
</td>
<td class="date">18/01/2022</td>
<td class="price">60</td>
<td class="quantity">100</td>
</tr>
<tr>
<td class="trade">
<span class ="badge rounded-pill bg-danger text-white">SELL</span>
</td>
<td class="date">18/01/2022</td>
<td class="price">60</td>
<td class="quantity">100</td>
</tr>
<tr>
<td class="trade">
<span class ="badge rounded-pill bg-danger text-white">BUY</span>
</td>
<td class="date">18/01/2022</td>
<td class="price">60</td>
<td class="quantity">100</td>
</tr>
</tbody>
</table>
</div>