javascript - ejemplos - document.getelementbyid value

Cambio de la posición del elemento DOM del cuadro de búsqueda en datos.

Question

En realidad soy nuevo en el complemento de datos de jQuery.

He adjuntado el complemento a mis tablas usando este método usando este código.

$(document).ready(function() 

         $(''#table_id'').dataTable({

         });
 });

Ahora lo que quiero es que las tablas de datos proporcionen un cuadro de texto en el que podamos ingresar nuestra cadena de filtro y los resultados se filtrarán.

Así que quiero usar mi cuadro de texto diseñado existente para ese propósito, no quiero agregar un nuevo cuadro de texto en la interfaz de usuario. Así que he pasado por este enlace.

http://datatables.net/examples/basic_init/dom.html

Pero no estoy entendiendo. ¿Es posible utilizar el cuadro de texto existente. Por favor aconséjame

Vea que estaba teniendo una situación como esta antes de implementar estos datos.

Ahora, cuando aplico este complemento de datos. Se agrega un nuevo cuadro de texto para la búsqueda. No quiero un cuadro de texto nuevo. Quiero que mi cuadro de texto existente implemente la funcionalidad de búsqueda.

Answer 1

Esto es muy simple. Primero debes ocultar el cuadro de búsqueda predeterminado:

.dataTables_filter {
   display: none;
}

Ejemplo de su propio cuadro de búsqueda diseñado, colocado en algún lugar del HTML:

<input type="text" id="searchbox">

script para buscar / filtrar al escribir en el cuadro de búsqueda

$("#searchbox").keyup(function() {
   dataTable.fnFilter(this.value);
});    

demostración de trabajo -> http://jsfiddle.net/TbrtF/

Si está utilizando DataTables 1.10, el JS debería tener el siguiente aspecto:

$("#searchbox").on("keyup search input paste cut", function() {
   dataTable.search(this.value).draw();
});  

Answer 2

Para eliminar las opciones de filtro, puede usar css como se menciona en otras respuestas o puede eliminarlo en la inicialización del datatable usando:

$("#table").dataTable({"bFilter": false}); //disables filter input

o usando el atributo sDom como este:

 "sDom": ''<"H"lr>t<"F"ip>'' //when bJuery is true

Vea aquí http://datatables.net/usage/options#sDom para más opciones.

Ahora acerca de usar su propio campo de texto como un cuadro de filtro, simplemente adjunte un controlador de keypress y use la opción fnFilter esta manera:

$(document).ready(function() 

     oTable = $(''#table_id'').dataTable({
         "sDom": ''<"H"lr>t<"F"ip>'' 
     });
     $(''#myInputTextField'').keypress(function(){
         oTable.fnFilter( $(this).val() );
     });
 });

Answer 3

Para la versión actual en diciembre de 2018 (v1.10.19) necesita hacer estos pasos:

1. Ocultar el cuadro de búsqueda predeterminado (CSS):

   .dataTables_filter { display: none; }

2. Añadir nuevo filtro a su lugar deseado (HTML)

   Search:<br><input type="text" id="searchFilter">

3. Después de su función de inicialización de DataTables, necesita escribir su función de búsqueda (JS):

   $(document).ready(function() {
      var table = $(''#example'').DataTable();
   
   $(''#searchFilter'').on( ''keyup'', function () {
      table.search( this.value ).draw();
   } );

Nota : fnfilter está en desuso, así que use search (), pero search () no vuelve a dibujar la tabla, así que también necesita usar draw ().

Answer 4

Puede definir un nuevo elemento newSearchPlace para que el filtro de búsqueda de la tabla de datos newSearchPlace :

<div id="newSearchPlace"></div>

Luego coloca el filtro de búsqueda dentro de este nuevo lugar:

$("#newSearchPlace").html($(".dataTables_filter"));

Answer 5

Puedes cambiar el estilo de la entrada de búsqueda muy fácilmente con css

en el archivo css:

.dataTables_filter input {
     background: blue;
}

Con Javascript

$(".dataTables_filter input").css({ "background" :"blue" });

Pruébalo pegando esto en tu consola.

Answer 6

Sí puedes hacer una clase en tu css como:

.pull-left{
    float: left !important;
}

y luego agregue esta clase a la búsqueda de datos div usando jquery o javascript.

ejemplo:

$(''.dataTables_filter'').addClass(''pull-left'');

asegúrese de que su script esté en la parte principal de su html.