javascript - 如何在按钮单击事件中将两个源数据加载到数据表中

Question

你能看看 This Demo吗 让我知道如何声明和初始化数据表，然后按需将源数据加载到表中(通过单击按钮)我需要做的是清除或 chop 表 <td>s在添加/加载新数据之前

var dataSet1 = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ]
    ];

var dataSet2 = [
    [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
    [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
    [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
    [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
    [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
    [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
    [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ]
  ];

var tbl = $('#example').DataTable();

$("#load1").on("click", function(){
    
});

$("#load2").on("click", function(){

});

@import 'https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

<button id="load1" class="btn btn-default" type="submit">Load Dataset 1</button>
<button id="load2" class="btn btn-default" type="submit">Load Dataset 2</button>
<table id="example" class="display" width="100%">
     <thead>
                <tr>
                    <th>Name</th>
                    <th>Office</th>
                    <th>Subscriber</th>
                    <th>Share</th>
                    <th>Subscriber Date</th>
                    <th>Balance</th>
                </tr>
            </thead>
</table>

Answer 1

基本上您需要清除表格然后添加新行，然后再次绘制表格:

$("#load1").on("click", function(){
    tbl.clear().rows.add(dataSet1).draw();

});

$("#load2").on("click", function(){
    tbl.clear().rows.add(dataSet2).draw();
});