Javascript var goes outside after click

Question

I would like the Datatable to don't start immediately, the btnInit is to Init the Datatable then after that the btnSearch is to reload for searching, but the btnSearch is not working because the var table is still inside the btnInit, is there a way that after i Init the Datatable i can reload the var table, maybe something like after i Init the var table goes outside the btnInit so the btnSearch can call the var table, please help.

$('#btnInit').on("click", function () {
    $("#btnInit").hide();
    $("#btnSearch").show();

    var table = $('#IPSCICODatatable').DataTable({
        "processing": true,
        dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-2'i><'col-sm-5'B><'col-sm-5'p>>",
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print'
        ],
        "ajax": {
            "url": '/Home/GetAllCICO',
            "type": "POST",
            "datatype": "json",
            "data": function (d) {
                d.searchParameters = {};
                d.searchParameters.TransCode = $('#txtSSNTIN').val();
            }
        },
        "columns": [
            { "data": "Id", "autoWidth": true },
            { "data": "TransCode", "autoWidth": true },
            { "data": "TransDesc", "autoWidth": true }
        ]
    });
});

$('#btnSearch').on("click", function () {
    table.ajax.reload();
});

Have you tried, declaring the table outside the `btnInit Click` function and wrapping the entire functions inside IIFE ? — Anurag Singh Bisht, Jul 19 '17 at 11:26

caramba · Accepted Answer · 2017-07-19T11:33:55.667

Just define the var table outside. But be careful, now it's in global scope. But should work

var table;

$('#btnInit').on("click", function () {
    $("#btnInit").hide();
    $("#btnSearch").show();

    table = $('#IPSCICODatatable').DataTable({
        "processing": true,
        dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-2'i><'col-sm-5'B><'col-sm-5'p>>",
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print'
        ],
        "ajax": {
            "url": '/Home/GetAllCICO',
            "type": "POST",
            "datatype": "json",
            "data": function (d) {
                d.searchParameters = {};
                d.searchParameters.TransCode = $('#txtSSNTIN').val();
            }
        },
        "columns": [
            { "data": "Id", "autoWidth": true },
            { "data": "TransCode", "autoWidth": true },
            { "data": "TransDesc", "autoWidth": true }
        ]
    });
});

$('#btnSearch').on("click", function () {
    table.ajax.reload();
});

Now that you can use the var table also in different functions or wherever without overwriting it and doing nasty things you should read about Immediately-Invoked Function Expression

score 0 · Answer 2 · answered Jul 19 '17 at 11:30

You can declare the variable outside without polluting the global namespace. Just create an IIFE, which will essentially make table a private variable visible to both jQuery calls.

(function() {
    var table; 

    // the rest goes here, without redefining `table` (so `table` = ...`)
}();

score 0 · Answer 3 · answered Jul 19 '17 at 11:36

declare the table variable in global scope

var table = null;
$('#btnInit').on("click", function () {
    $("#btnInit").hide();
    $("#btnSearch").show();

    table = $('#IPSCICODatatable').DataTable({
        "processing": true,
        dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-2'i><'col-sm-5'B><'col-sm-5'p>>",
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print'
        ],
        "ajax": {
            "url": '/Home/GetAllCICO',
            "type": "POST",
            "datatype": "json",
            "data": function (d) {
                d.searchParameters = {};
                d.searchParameters.TransCode = $('#txtSSNTIN').val();
            }
        },
        "columns": [
            { "data": "Id", "autoWidth": true },
            { "data": "TransCode", "autoWidth": true },
            { "data": "TransDesc", "autoWidth": true }
        ]
    });
});

$('#btnSearch').on("click", function () {
    table.ajax.reload();
});

Javascript var goes outside after click

3 Answers3