如何在单击按钮时加载DataTables数据 [英] How to load DataTables data on button click

问题描述

我正在使用此dataTable代码加载表数据.

I am using this dataTable code to load a table data.

var table = $('#fileInfoTable').DataTable({
    "sAjaxSource": "api/file/loadAll",
    "sAjaxDataProp": "",
    "order": [
        [0, "asc"]
    ],
    "aoColumns": [{
        "mData": "fileId"
    }, {
        "mData": "fileName"
    }, {
        "mData": "sentDate"
    }, {
        "mData": "direction"
    }, {
        "mData": "interfaceType"
    }, {
        "mData": "buisnessLine"
    }, {
        "mData": "vaultName"
    }, {
        "mData": "manageCompony"
    }, {
        "mData": "lastActivity"
    }, {
        "mData": "lastActivityStatus"
    }, {
        "mData": "feedbackName"
    }, {
        "mData": "feedbackDate"
    }, {
        "mData": "processDate"
    }, {
        "mData": "eventsAmount"
    }, {
        "mData": "goodEventsAmount"
    }, {
        "mData": "sourceId"
    }]
});

如果我在页面加载时加载它，效果很好，但是我需要能够通过单击按钮而不是页面加载来加载数据.我该怎么办?

It works fine if I load it on page load but I need to be able to load the data by clicking a button and not on page load. How can I do it?

现在我在下面使用此代码，可以看到警报，但表未定义

now I am using this code below and I can see the alert but the table is undefined

$(document).ready(function () {
    var table = $('#fileInfoTable').DataTable({
        data: [],
        "order": [
            [0, "asc"]
        ],
        "aoColumns": [{
            "mData": "fileId"
        }, {
            "mData": "fileName"
        }, {
            "mData": "sentDate"
        }, {
            "mData": "direction"
        }, {
            "mData": "interfaceType"
        }, {
            "mData": "buisnessLine"
        }, {
            "mData": "vaultName"
        }, {
            "mData": "manageCompony"
        }, {
            "mData": "lastActivity"
        }, {
            "mData": "lastActivityStatus"
        }, {
            "mData": "feedbackName"
        }, {
            "mData": "feedbackDate"
        }, {
            "mData": "processDate"
        }, {
            "mData": "eventsAmount"
        }, {
            "mData": "goodEventsAmount"
        }, {
            "mData": "sourceId"
        }]
    })

    $("#loadData").on('click', function () {
        alert("ppp:" + table.name);
        table.ajax.url("api/file/loadAll").load();
    })
});

推荐答案

下面的代码解决了我的目的，即在按钮单击而不是页面加载时加载数据.我创建了ID为"eventlistview"的按钮，并单击此按钮重新初始化了数据表.

Below code solved my purpose which is to load data on button click not on page load. I have created button with ID "eventlistview" and on click of this re initializing the data table.

// global variable
var grid;
jQuery(document).ready(function ($) {
 //initialise blank datatable on page load
  grid = $('#grd').DataTable({
           "processing": false, // control the processing indicator.
           paging: false,
            searching: false,
            info: false,
          // you can load data here also as per requirement
         });
});

jQuery(document).ready(function ($) {
  jQuery('#eventlistview').click(function () {
     // destroy datatable
     $("#grd").dataTable().fnDestroy()
     //reinitialise datatable
      $("#grd").dataTable({
          "processing": false, // control the processing indicator.
          "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
          "ajax": {"url": "",
                    "type": "GET",
                   },
          "language": {"emptyTable": "No data found."
                      },
           columns: [{ "data": "TitleTxt" },
                      {"data": "StartDate"},
                      {"data": "EndDate"},
                    ],
           "order": [[0, "asc"]]            
                    });          
    });
});

https://stackoverflow.com/a/58976439/5685144

希望它也对您有帮助.

这篇关于如何在单击按钮时加载DataTables数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！