DataTables: Utwórz ciąg zapytania adresu URL z filtru tabeli

Question

Podczas wyszukiwania lub klikania filtru w tabeli chcę utworzyć zapytanie URL z tabeli, aby udostępnić ten adres URL innej osobie.

Czy ktoś wie, jak to jest możliwe?

To jest mój kod

$("#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

DataTables ma wbudowaną możliwość zapisywania stanu stole lokalnie, tj w localStorage/sessionStorage tylko. Jeśli chcesz przekazać adres URL lub link, musisz najpierw mieć możliwość utworzenia adresu URL/łącza do przekazania, a następnie umożliwić stronie "przywrócenie" tabeli danych w oparciu o parametry przekazane w tym adresie URL/linku.

Oto niezwykle proste, ale działające rozwiązanie, które właśnie to robi. To sprawia, że ​​można przejść statycznego linku do użytkownika w formularzu

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

a następnie DataTable na stronie zostaną przywrócone do filtrowania na x, pokazując stronę 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; 
}; 

Zastosowanie:

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

Aby uzyskać statycznego linku do DataTables aktualny stan

var url = linkify.link() 

Jak wspomniano tylko searchstring/filtr i strona jest w powyższym kodzie. Jednak niezwykle łatwe jest rozszerzenie o adres URL ajax, długość strony, aktualną posortowaną kolumnę itp., Ponieważ wykorzystuje ona metody get/set dataTables 1.10.x.