jquery - 我想在单击按钮时在 DataTable 中填充数据，默认情况下它应该显示没有可用数据

Question

我正在使用 NodeJs

• 我想在单击按钮时填充数据表。
• 我正在从 txt 文件读取数据。

home.ejs

<button id="SearchButton" class="btn btn-info">Search</button>

<table class="table table-bordered" id="ctsdataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Check No.</th>
            <th>Tran Code</th>
            <th>ISN</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Check No.</th>
            <th>Tran Code</th>
            <th>ISN</th>
        </tr>
    </tfoot>
</table>

home.js

$(document).ready(function() {
    Table = $('#ctsdataTable').DataTable({
        "ajax": "js/data.txt",
        "columns": [{
                "data": "check_number"
            },
            {
                "data": "tran_code"
            },
            {
                "data": "isn"
            }
        ]
    });
}); 

Answer 1

我想出了一个方法来做到这一点。

重新初始化 DataTable 时只需添加一个属性 "destroy": true

$(document).ready(function() {
$('#ctsdataTable').DataTable({
    "columns": [
        {"data": "session_date"},
        {"data": "session_number"},
        {"data": "r_session_number"},
        {"data": "account"},
        {"data": "amount"},
        {"data": "check_number"},
        {"data": "tran_code"},
        {"data": "isn"}
    ]
});

$('#SearchButton').on('click', function () {
    $('#ctsdataTable').DataTable( {
        "destroy": true,
        "ajax": "js/data.txt",
        "columns": [
            {"data": "session_date"},
            {"data": "session_number"},
            {"data": "r_session_number"},
            {"data": "account"},
            {"data": "amount"},
            {"data": "check_number"},
            {"data": "tran_code"},
            {"data": "isn"}
        ]
    });
});
});