डेटाटेबल्स: तालिका फ़िल्टर से यूआरएल क्वेरी स्ट्रिंग बनाएं

Question

जब मैं किसी तालिका में फ़िल्टर को खोज या क्लिक करता हूं, तो मैं इस यूआरएल को किसी को साझा करने के लिए तालिका से यूआरएल क्वेरी बनाना चाहता हूं।

क्या कोई जानता है कि यह कैसे संभव है?

यह मेरा कोड

$("#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 केवल अंतर्निहित localStorage/sessionStorage में यानी स्थानीय स्तर पर एक मेज के राज्य को बचाने के लिए, क्षमता गया है। यदि आप एक यूआरएल या लिंक पास करना चाहते हैं तो आपको पहले पास करने के लिए एक यूआरएल/लिंक बनाना होगा, फिर उस पेज को यूआरएल/लिंक में पारित पैराम्स के आधार पर डेटाटेबल को "बहाल" करने में सक्षम होना चाहिए।

यहां एक बेहद सरल लेकिन अभी तक काम करने वाला समाधान है जो बस ऐसा कर रहा है। यह यह संभव प्रपत्र

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

और फिर पृष्ठ पर DataTable x पर फ़िल्टर किए जाने बहाल हो जाएगा, दिखा पेज 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; 
}; 

उपयोग:

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

DataTables की एक स्थिर लिंक प्राप्त करने के वर्तमान स्थिति

var url = linkify.link() 

केवल searchstring/फिल्टर का उल्लेख किया और पेज ऊपर कोड में शामिल है के रूप में। लेकिन AJAX URL, पृष्ठ-लंबाई, वर्तमान सॉर्ट किए गए कॉलम इत्यादि के साथ विस्तार करना बेहद आसान है क्योंकि यह डेटाटेबल 1.10.x प्राप्त/सेट विधियों का लाभ उठा रहा है।