Tengo grupos de botones. Una vez que el usuario hace clic en el enlace, filtra el valor según el contenido del enlace. Por defecto agregué la clase seleccionada. Quiero que el valor predeterminado del enlace que contiene la clase selected se considere para el filtrado antes de que se active el evento de clic. Funciona bien cuando el usuario hace clic en c-btn-group pero no considera el valor predeterminado cuando se carga la página. A partir de ahora, muestra datos completos sin filtrar cuando se carga la página.
<div class="c-btn-group"> <a class="c-btn selected">Large Cap</a> <a class="c-btn">Small Cap</a> <a class="c-btn">virginica</a> </div>JS
$('.c-btn-group').on('click', 'a', function(event) { var searchTerm = this.textContent; /* 4th column filtering */ $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { if (data[3] == searchTerm) {return true;} return false; }) table.draw(); $.fn.dataTable.ext.search.pop(); // Add or remove 'selected' class; event.preventDefault(); $('a').removeClass('selected'); $(this).addClass('selected'); });Pruebe el siguiente script. Aquí está la demostración
Separe la lógica del filtrado de tabla de datos dentro de la función de filter . Obtenga el texto seleccionado por $('.c-btn-group .selected').text(); y filter(initialSelectedText);
var myList2; $.ajax({ url: "https://raw.githubusercontent.com/markwsac/jsonfile/main/jsondata.json", type: "get", dataType: 'text', async: false, success: function(response) { if (!response) return; response = response.slice(0, -1); // trim ";" at the end window.myList2 = JSON.parse(response); }, error: function(err) { console.log(err); } }); var myList = window.myList2; $(document).ready(function () { table = $("#mfTable").DataTable({ data: myList, paging: true, lengthChange: false, searching: true, info: false, columns: [ { data: 'Fund Name' }, { data: 'Morningstar Rating' }, { data: 'Category Rank' }, { data: 'Category' }, { data: 'Expense Ratio' }, { data: 'AUM (Cr)' }, { data: 'NAV' }, ], columnDefs: [{ "defaultContent": "-", "targets": "_all" }] }); const initialSelectedText = $('.c-btn-group .selected').text(); filter(initialSelectedText); $('.c-btn-group').on('click', 'a', function(event) { var searchTerm = this.textContent; /* 4th column filtering */ filter(searchTerm); // Add or remove 'selected' class; event.preventDefault(); $('a').removeClass('selected'); $(this).addClass('selected'); }); }); function filter(searchTerm){ $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { if (data[3] == searchTerm) {return true;} return false; }); table.draw(); $.fn.dataTable.ext.search.pop(); }DataTable proporciona una opción para esto. Cuando esté inicializando su tabla, simplemente use la opción searchCols que cargaría la tabla con la búsqueda inicial provista. por ejemplo:
table = $("#mfTable").DataTable({ data: myList, paging: true, lengthChange: false, searching: true, info: false, columns: [ { data: 'Fund Name' }, { data: 'Morningstar Rating' }, { data: 'Category Rank' }, { data: 'Category' }, { data: 'Expense Ratio' }, { data: 'AUM (Cr)' }, { data: 'NAV' }, ], columnDefs: [{ "defaultContent": "-", "targets": "_all" }], searchCols: [ null, null, null, { "search": "Large Cap" }, null, null, null, ] })Aquí está el enlace para esta opción https://datatables.net/reference/option/searchCols
También puede usar el método de búsqueda propio de las bibliotecas en lugar de implementarlo usted mismo, así que en lugar de escribir:
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { if (data[3] == searchTerm) {return true;} return false; }) table.draw(); $.fn.dataTable.ext.search.pop(); simplemente escriba: table.column(3).search(searchTerm).draw();