CODEWITHSUNDEEP
datatablesurl-rewritingcopyyadcf
Amina Freinger
Amina Freinger

Reputation: 11

Datatables with YADCF - 'Copy URL' button with with applied filters

I use the Datatables script with YADCF filters. I need to create a new "Copy URL" button that copies the page URL with the applied filters. I added a script that uses the "URLSearchParams" and allows to get the filtered column data. For example, if I type example.com/table?category=DAA URL manually in the browser address bar, it filters the data in the "Category" column and shows the relevant result. However, I am not sure how to improve this script and:

  1. make the URL be updated dynamically in the address bar when you change filters OR save the updated URL on the server (what approach will be easier);
  2. get this URL with applied filters from the server;
  3. make the "Copy URL" button to copy this URL to the clipboard. The copied URL should have a similar format: example.com/table?category=DAA&function=Data%20Con&bits=12 (where example.com/table is the link to the page on the site)

I uploaded the whole code here: https://plnkr.co/edit/GuT04wDkcGDzV7y5?preview The part below allows to use the parameters in filters:

const urlParams = new URLSearchParams(window.location.search);

const whichCategory = urlParams.get('category');
    if ( whichCategory !== null ) {
  yadcf.exFilterColumn( productTableVar, [[0, whichCategory]]);
}
const whichFunction = urlParams.get('function');
if ( whichFunction !== null ) {
  yadcf.exFilterColumn( productTableVar, [[1, whichFunction]]);

}

const whichBit = urlParams.get('bits');
    if ( whichBit !== null ) {
  yadcf.exFilterColumn( productTableVar, [[3, whichBit]]);
}

An important note: the columns include content in HTML format with special characters (& or /) and spaces.

I will appreciate your help. Thank you.

Upvotes: 1

Views: 123

Answers (0)

Related Questions