1

I am using TableExport.js script to export an html table, and I need to export the data after I've filtered it by hiding the rows I don't want. TableExport's method .update() comes in really useful here, but I am having some problems to call it every time the data is filtered, which is associated to an onchange event. Here are the relevant pieces of my code:

$(function () {
    var exportedTable = $("#taskListTable").tableExport();
    exportedTable.update({
        // some options
    });

    $('body').on('change', '.filter', function (exportedTable) {
        // some code for filtering
        tableUpdate(exportedTable);
    });
})

function tableUpdate(table) {
    table.update({
        ignoreCSS: ["tr.tableexport-ignore", "tr.tableexport-ignore>td",
                    "tr.tableexport-ignore>th", "tr.hidden", "tr.hidden>td"]
    });
}

I keep getting an error of the type Uncaught TypeError: Cannot read property 'update' of undefined. I've been reading lots of threads (like this: Javascript passing object to function) and other info to understand the difference between passing by value and reference, but the more I read and try the more chaotic my mind is getting. So can anyone see what it is failing in my approach? - It's partly legacy code though, but I'm open to re-structure most of it if necessary.

I guess this is more a problem of JS misuse, so I hope this question will be useful both for people working with TableExport and people with similar JS issues. So I summon thee, JavaScript Jedis!

Community
  • 1
  • 1
jabadejat
  • 62
  • 6
  • Change to `$('body').on('change', '.filter', function () {` will do! The object is already trapped in a **closure** so just use it! – ibrahim mahrir Apr 07 '17 at 20:34
  • Thank you! It worked! Do you know about any well-explained sources where I can dig further into closures? :) – jabadejat Apr 07 '17 at 20:44
  • Yeah: [**First choice :D**](https://www.google.com/), then [**this**](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) and [**this**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)! – ibrahim mahrir Apr 07 '17 at 20:47

2 Answers2

3

Event handler functions are called with an event object as the parameter. You probably just wanted to access exportedTable from the scope, rather than accepting it as an argument.

guest
  • 6,450
  • 30
  • 44
0

As @guest said, you simply have to remove exportedTable from parameters:

$('body').on('change', '.filter', function () {
    # some code for filtering
    tableUpdate(exportedTable);
});
Vasili
  • 895
  • 7
  • 12