Question

我希望Datatable不立即启动，btnInit是Init the Datatable然后btnSearch将重新加载进行搜索，但是btnSearch无法正常工作，因为var表仍在btnInit中，有没有办法，在我初始化数据表之后，我可以重新加载var表，也许就像在我初始化var表之外的btnInit所以btnSearch可以调用var表，请帮忙。

$('#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();
});

Answer 1

只需在外面定义var table即可。但要小心，现在它在全球范围内。但应该工作

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();
});

既然你可以在不同的功能或任何地方使用var table而不会覆盖它并做一些令人讨厌的事情，你应该阅读Immediately-Invoked Function Expression

Answer 2

您可以在不污染全局命名空间的情况下将变量声明到外部。只需创建一个IIFE，它将使table一个私有变量对两个jQuery调用都可见。

(function() {
    var table; 

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

Answer 3

在全局范围内声明表变量

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出现在外面

3 个答案: