DataTables: URL-Abfragezeichenfolge aus Tabellenfilter erstellen

Question

Wenn ich in einer Tabelle einen Filter suche oder angeklickt habe, möchte ich eine URL-Abfrage aus der Tabelle machen, um diese URL jemandem mitzuteilen.

Weiß jemand, wie das möglich ist?

Dies ist mein Code

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

Tables hat nur eingebaute Fähigkeit, vor Ort den Zustand einer Tabelle zu speichern, das heißt in der localstorage/session. Wenn Sie eine URL oder einen Link weitergeben möchten, müssen Sie zunächst eine URL/einen Link erstellen, die übergeben werden soll. Anschließend können Sie Ihre Seite basierend auf den in dieser URL/Link übergebenen Parametern wiederherstellen.

Hier ist eine extrem einfache und doch funktionierende Lösung, die genau das tut. Es macht es möglich, eine statische Verbindung zu einem Benutzer auf dem Formular

auf x,

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

und dann die Datatable wiederhergestellt werden Filterung Seite zeigt 3 wird auf der Seite zu übergeben.

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; 
}; 

Verbrauch:

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

Um eine statische Verknüpfung der Datentabellen aktuellen Zustand zu erhalten

var url = linkify.link() 

Wie bereits erwähnt nur search/Filter und Seite wird in dem obigen Code enthalten. Aber es ist extrem einfach, mit AJAX-URL, Seitenlänge, aktueller sortierter Spalte usw. zu erweitern, da es die get/set-Methoden von dataTables 1.10.x ausnutzt.