Dynamically alter sFileName (TableTools) based on text entered into DataTables filter

Dynamically alter sFileName (TableTools) based on text entered into DataTables filter

harrystevensharrystevens Posts: 1Questions: 1Answers: 0
edited November 2014 in Free community support

I'm trying to create a function that will dynamically update the name of the .csv file that gets downloaded via the TableTools button. The update to the file name would be based on the query that the user enters into the DataTables filter. For example, if the user searched for "Hello", the name of the downloaded file would be something like "Title - Hello.csv", rather than just "Title.csv".

Here have been my steps so far:

Step 1. I noticed that the <input> tag generated by the DataTables filter does not have an ID, making it impossible to grab whatever value is entered. So with jQuery I added an ID called 'searchbox':

$('div#table_filter.dataTables_filter label input').attr('id','searchbox');

Step 2. Now I need to create a variable of the value typed into the search box. This variable will update as the user types.

var searchQuery = $("#searchbox").val();

$("#searchbox").on("input",function(){
        searchQuery = $(this).val();
        console.log('The search is: '+searchQuery);
})

Step 3. But here's where I'm stuck. I want to take my searchQuery variable and plug it into my sFileName, as specified in tableTools.aButtons.sFileName. It would be something like "sFileName":"* - "+searchQuery+".csv".

Currently, I've settled with setting the file name statically:

var table = $('#table').DataTable({
    //...
    "tableTools": {
        "aButtons": [
            {
                "sExtends" : "csv",
                "oSelectorOpts":{
                    "filter":"applied",
                    "order":"current",
                    "page":"current"
                },
                "sFileName":"* - Data.csv"
            }
        ]
    }
});

So, in short, I want to replace "Data" from the file name with some text generated dynamically based on what the user searches for.

Here is a fiddle based on the site I'm working on: http://jsfiddle.net/ncyo9k2m/5/
Here's the actual site: http://harryjstevens.com/stations/
I'm working within the dataTable() function.

Any suggestions would be greatly appreciated. Thanks very much.

Answers

  • shaneismeshaneisme Posts: 11Questions: 0Answers: 0

    Sorry to bump this, but I'm looking for a way to dynamically alter the file name as well.

This discussion has been closed.