DataTables: Tablo filtresinden URL sorgu dizesi yapın

Question

Tabloda arama yaptığınızda veya tıklatıldığında, bu URL'yi bir başkasına paylaşmak için tablodan URL sorgusu yapmak istiyorum.

Birisi bunun nasıl mümkün olabileceğini biliyor mu?

Bu

$("#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 sadece yerleşik localStorage/sessionStorage içinde, lokal olarak yani bir tablo durumunu kaydetme özelliği benim koddur. Bir URL'yi veya bağlantıyı geçmek istiyorsanız, önce iletilecek bir URL/link oluşturabilmeniz, ardından sayfanızın bu URL/bağlantıda geçirilen paramlara bağlı olarak dataTable'ı "geri yükleyebilmesini" sağlayabilirsiniz.

İşte bunu yapan son derece basit ama yine de çalışan bir çözüm. Bu mümkün formu

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

ve sonra sayfadaki dataTable sayfasını 3 gösteren x üzerinde filtreleme edilecek restore edilecek bir kullanıcıya statik bir bağlantı geçmek için yapar.

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

Kullanımı:

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

datatables statik bağlantısını almak için sadece aranacak/filtreyi söz ve sayfa Yukarıdaki kodda yeraldığı üzere mevcut durumu

var url = linkify.link() 

. Fakat ajax URL'si, sayfa uzunluğu, mevcut sıralı sütun vb. Ile genişletilmesi son derece kolaydır, çünkü dataTables 1.10.x get/set yöntemlerinden yararlanmaktadır.