DataTables: Tạo chuỗi truy vấn url từ bộ lọc bảng

Question

Khi tôi tìm kiếm hoặc nhấp vào bộ lọc trong bảng, tôi muốn tạo truy vấn url từ bảng để chia sẻ url này với một người nào đó.

Có ai đó biết cách này có thể không?

Đây là mã của tôi

$("#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 đã chỉ tích hợp khả năng lưu trạng thái của một bảng cục bộ, tức là trong localStorage/sessionStorage. Nếu bạn muốn chuyển URL hoặc liên kết, trước tiên bạn phải có thể tạo URL/liên kết để chuyển, sau đó làm cho trang của bạn có thể "khôi phục" dataTable dựa trên các thông số được chuyển trong URL/liên kết đó.

Đây là giải pháp cực kỳ đơn giản nhưng vẫn hoạt động hiệu quả. Nó làm cho nó có thể để vượt qua một liên kết tĩnh cho người dùng trên các hình thức

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

và sau đó là DataTable trên trang sẽ được phục hồi được lọc theo x, hiển thị trang 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; 
}; 

Cách sử dụng:

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

Để có được một liên kết tĩnh của DataTables tình trạng hiện thời

var url = linkify.link() 

Như đã đề cập chỉ searchstring/lọc và trang được bao gồm trong đoạn mã trên. Nhưng cực kỳ dễ dàng mở rộng với URL ajax, độ dài trang, cột được sắp xếp hiện tại v.v. vì nó đang tận dụng các phương thức get/set của dataTables 1.10.x.