我想在按钮单击时在DataTable中填充数据,默认情况下它应该不显示可用数据

时间:2018-11-16 08:06:24

标签: jquery node.js ajax datatable datatables

我正在使用NodeJ

  • 我要在单击按钮时填充数据表。
  • 我正在从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"
            }
        ]
    });
}); 

2 个答案:

答案 0 :(得分:0)

尝试一下:

$(document).ready(function() {

var yourTable = $('#ctsdataTable').DataTable({
    "columns": [
        {"data": "check_number"},
        {"data": "tran_code"},
        {"data": "isn"}
    ]
});

$('#SearchButton').on('click', function () {
    $.ajax({
        url: "js/data.txt",
        success: function (entries) {
            if (!entries)
                return;

                entries.forEach(function (entry) {
                yourTable.row.add(entry);
            });

            yourTable.draw();
        }
    });
});});

答案 1 :(得分:0)

我想出了一种方法。

在重新初始化DataTable时只是放置了一个属性 “ destroy”:是

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