0

Quiero añadir un placeholder que diga "Buscar" en un input dónde estoy utilizando Datatables de Bootstrap. Revisé las líneas de código del archivo js qué utiliza Datatables pero no tuve resultados en añadir lo que deseo.

Otra posible solución si alguien sabe sería la de eliminar ese label que indica Buscar: y al lado donde está el input colocar dentro del input el placeholder "Buscar" y el label mencionado anteriormente eliminarlo quedando solo el input.

Código JS:

    $("#example tfoot th").each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" id="form12" class="form-control" placeholder="Filtrar..' + title + '" />');
    });
    var table = $("#example").DataTable({
        "dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">',
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
        },
        autoWidth: false,

        initComplete: function (settings, json) {
            var footer = $("#example tfoot tr");
            $("#example thead").append(footer);
        }
    });

    $("#example thead").on("keyup", "input", function () {
        table.column($(this).parent().index())
            .search(this.value)
            .draw();
    });
});

2 respuestas 2

4

Dentro de las opciones "language": {"url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"},, ingresa: "searchPlaceholder": "Buscar un usuario" esto deberia de poner un placeholder al input de buscar. Referencia: Forum datatables

1
  • Geniaa!!!. Muchas gracias ahí funciono.
    – Lucas
    Commented el 20 feb. 2023 a las 17:44
0

Puedes agregar el placeholder usando JavaScript

Por ejemplo, ubica en el HTML el elemento de busqueda y agrega el placeholder con un script:

<div id="example_filter" class="dataTables_filter">
  <label>Search:
  <input type="search" class="" aria-controls="example"> 
  </label>
</div>

luego con JS y listo:

const inputSearch = document.querySelector('#example_filter input');
inputSearch.placeholder = 'Buscar...';

Claro, para que funcione tiene que ejecutarse despues de iniciado el plugin, tienes que colocar este script despues de la carga del datatable

1
  • Gracias compañero por el intento pero no pude solucionarlo, coloqué el html arriba de la tabla y el script debajo del datablesJS pero no se reemplazó. Tu input funciono pero no lo reemplazo al del script de dataTables, lo colocó arriba como si fuera ajeno a la tabla. Igual aprecio el intento!! Arriba en la pregunta original la edité y acabo de colcar el html de la tabla por si detectas alguna posible solución cuando tengas tiempo.
    – Lucas
    Commented el 20 feb. 2023 a las 16:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.