2012-06-26 129 views
5

Me gustaría poder hacer un enlace a una página con una tabla de datos que pasaría un valor de parámetro de búsqueda en la url. El objetivo es tener la página con la tabla de datos abierta previamente filtrada con el parámetro de valor de búsqueda.Datatables - cómo pasar el parámetro de búsqueda en una url

He configurado un jsfiddle para que funcione con algunos datos de muestra.
http://jsfiddle.net/lbriquet/9CxYT/10/

La idea sería añadir un parámetro a la URL jsFiddle para que la página exhibiría con el valor de entrada de búsqueda establecido en "Firefox", por ejemplo, y la tabla filtrada para mostrar sólo los partidos de búsqueda.

¡Cualquier ayuda sería muy apreciada!

Respuesta

4

Puede simplemente have a function that reads your URL var y luego filtrar la tabla. Imagino que se pasa q = Firefox como su búsqueda

// Read a page's GET URL variables and return them as an associative array. 
function getUrlVars() 
{ 
var vars = {}; 
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
     vars[key] = value; 
    }); 
    return vars; 

} 

$(document).ready(function() { 
    // Get the query from the url 
    var query = getUrlVars()['q']; 
    // create the table 
    var oTable = $('#example').dataTable(); 
    // Filter it 
    oTable.fnFilter(query, 2); 
}); 

violín aquí http://fiddle.jshell.net/9CxYT/17/show/?q=Firefox

+0

Esto suena como la solución correcta ... pero no pude conseguir que funcione. Aquí hay un jsfiddle de cómo intenté integrar tu código ... ¿quizás no lo estoy haciendo correctamente? Oculta todas las entradas. http://jsfiddle.net/lbriquet/9CxYT/14/ – lbriquet

+1

El marco de diseño jsfiddle se puede ver como una página independiente (no en un iframe). Para hacer esto, haga clic derecho en el marco de diseño y seleccione "Este marco" y luego "Abrir marco en una pestaña nueva". Esto carga la página como: http://fiddle.jshell.net/lbriquet/9CxYT/14/show/ Traté de agregar el valor "q" a la url, pero no agregó mi valor a la búsqueda filtrar o mostrar las filas con el valor. http://fiddle.jshell.net/lbriquet/9CxYT/14/show/?q=firefox ¿Puede ayudarme a entender lo que estoy haciendo mal? – lbriquet

+1

@lbriquet no sabía acerca de esa característica de jsfiddle. De todos modos, fue la función getUrlVars la que aspiró, ahora funciona. Actualicé mi respuesta –

3

Ésta es una cuestión de edad, pero todavía aparece alta en la búsqueda de una solución. Esto es lo que hice para que funcione.

$(document).ready(function() { 
 
    
 
    // First, get the search parameter. Here I use example.com#search=yourkeyword 
 
    var searchHash = location.hash.substr(1), 
 
     searchString = searchHash.substr(searchHash.indexOf('search=')) 
 
\t \t     .split('&')[0] 
 
\t \t     .split('=')[1]; 
 
    
 
    
 
    $('#example').dataTable({ 
 
    "oSearch": { "sSearch": searchString } 
 
    }); 
 
})

Cuestiones relacionadas