Me gustaría hacer un filtro usando List.js. Tengo dos botones simples: "COMPRAR" y "VENDER". Idealmente, deberían usarse como referencia para buscar el valor de una celda específica, pero no puedo hacerlo funcionar.
Aquí está uno de los objetos:
"trade": "<span class=\"badge rounded-pill bg-danger text-white\">SELL</span>", "date": "18/01/2022", "price": "60", "quantity": "10" }Este es el código del filtro.
$('.filter').click(function () { var search = $(this).text().toUpperCase(); // val = SELL featureList.filter(function (item) { return item.values().trade.includes(search); }); }); Si reemplazo manualmente la search con el valor "SELL" en la función includes() , obtengo el resultado que espero... usando la variable no...
Además, ¿hay alguna forma de seleccionar automáticamente la columna donde buscar? Intenté agregar un atributo data-filter al botón y logré recuperar el valor, pero si intento, el siguiente código no funciona
$('.filter').click(function () { var col = $(this).data('filter'); // val = trade featureList.filter(function (item) { return item.values().col.includes('SELL'); }); });Gracias por ayudarme a entender lo que claramente hago mal.
Te faltaba class="list" para el elemento tbody. Esto es necesario para list.js. Además, su variable de búsqueda tenía espacios en blanco en cada extremo debido al elemento de intervalo en las celdas comerciales. Al recortar los espacios en blanco, su variable de búsqueda puede usarse en el método include().
$(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>