DataTables: crea una stringa di query url dal filtro tabella

Question

Quando cerco o faccio clic su filtro in una tabella, desidero rendere la query url dalla tabella per condividere questo URL a qualcuno.

Qualcuno sa come è possibile?

Questo è il mio codice

$("#example").dataTable({ 
     "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], 
     "iDisplayLength": -1, 
     "fnStateSave": function(oSettings, oData) { 
      localStorage.setItem('DataTables_' + window.location.pathname, JSON.stringify(oData)); 
     }, 
     "fnStateLoad": function(oSettings) { 
      return JSON.parse(localStorage.getItem('DataTables_' + window.location.pathname)); 
     }, 
     "fnStateSaveCallback": function(){ 

     } 
    }).columnFilter({ 
     sPlaceHolder: "foot:after", 
     aoColumns: [ 
      {type: "text", bSmart: true}, 
      {type: "select", values: ['YearEnd', 'Quarter']}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"}, 
      {type: "number-range"} 
     ] 
    }); 

}); 

Answer 1

DataTable è dotato di possibilità di salvare lo stato di un tavolo a livello locale, cioè nel localStorage/sessionStorage solo. Se vuoi passare un URL o un link devi prima essere in grado di creare un URL/link per passare, quindi rendere la tua pagina in grado di "ripristinare" il dataTable in base ai parametri passati in quell'URL/link.

Ecco una soluzione estremamente semplice ma utile che sta facendo proprio questo. Esso permette di passare un collegamento statico a un utente sul modulo

http://mywebsite.com?dtsearch=x&dtpage=3

e poi il dataTable pagina verrà ripristinato ad essere il filtraggio x, pagina 3.

var DataTablesLinkify = function(dataTable) { 
    this.dataTable = dataTable; 
    this.url = location.protocol+'//'+location.host+location.pathname; 
    this.link = function() { 
     return this.url + 
      '?dtsearch='+this.dataTable.search() + 
      '&dtpage='+this.dataTable.page(); 
      //more params like current sorting column could be added here 
    } 
    //based on http://stackoverflow.com/a/901144/1407478 
    this.getParam = function(name) { 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
     return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 
    this.restore = function() { 
     var page = this.getParam('dtpage'), 
      search = this.getParam('dtsearch'); 
     if (search) this.dataTable.search(search).draw(false); 
     if (page) this.dataTable.page(parseInt(page)).draw(false); 
     //more params to take care of could be added here 
    } 
    this.restore(); 
    return this; 
}; 

Usage:

var table = $('#example').DataTable(), 
    linkify = DataTablesLinkify(table); 

per ottenere un link statico delle DataTable stato attuale

var url = linkify.link() 

Come menzionato solo termine di ricerca/filtro e la pagina è incluso nel codice di cui sopra. Ma è estremamente facile estenderlo con l'URL ajax, la lunghezza della pagina, la colonna ordinata corrente ecc. Poiché si avvantaggia dei metodi get/set DataTables 1.10.x.