Estoy tratando de activar la búsqueda por columna al hacer clic en el elemento relacionado.
Logré obtener el cuadro de búsqueda al hacer clic, pero no realiza la búsqueda
No soy tan experto con javascript y jQuery, pero este es mi código:
// Setup - add a text input to each footer cell $('#DataTable tfoot th').each(function () { var title = $(this).text(); $(this).click(function (event) { $(this).html('<input type="text" placeholder="Search ' + title + '" />'); $(this).unbind('click'); }); }); // DataTable var table = $('#DataTable').DataTable({ initComplete: function () { // Apply the search this.api().columns().every(function () { var that = this; $('input', this.footer()).on('keyup change clear', function () { if (that.search() !== this.value) { that .search(this.value) .draw(); } }); }); } });¿Hay alguna forma de acortar el código?
Gracias
La entrada no existe en el punto en el que adjunta su controlador de eventos de keyup change clear . En su lugar, deberá usar eventos delegados.
initComplete: function() { this.api().columns().every(function() { var that = this; $(this.footer()).on('keyup change clear', 'input', function() { if (that.search() !== this.value) { that.search(this.value).draw(); } }); }); } Puede usar el one método de jQuery para adjuntar un controlador de eventos que solo se llamará una vez. También debe evitar crear múltiples contenedores jQuery para la misma entrada donde pueda.
$('#DataTable tfoot th').each(function () { var $this = $(this); $this.one("click", function (event) { $this.empty().append($('<input/>').attr("type", "search").attr("placeholder", "Search " + $this.text())); }); });