tablefilter js using external filters

I am trying to implement the tablefilter.js to my grails web app(http://www.tablefilter.com/external-filters.html). I am following the format they provided on the website. But when I try to call the tf.filter function from onclick, it gives me the tf is not defined error.

<input id="btnFlt" value="Filter" type="button" class="btn btn-default" onclick="tf.filter();"



<g:javascript library=jquery>  $( function() {
            var filtersConfig = {

                col_0: "multiple",
                col_1: "select",
                col_2: "checklist",
                col_4: "none",
                col_8: "none",
                /* external filters */
                external_flt_ids: [

                    'slcYear'

                ],
                /* sorting feature */
                extensions: [{ name: 'sort' }]
            };

            var tf = new TableFilter(demo,filtersConfig);


            // Ininialiaze TableFilter instance
            tf.init();

        } );`