JS DataTables 使用HTML DOM方式

官方操作方式 請點

使用時請分別引入

https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js

https://code.jquery.com/jquery-1.12.3.js

https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css

在操作使用時，要注意當連續更新Tables資料時，資料不替換的問題。

以下附上SRC.

HTML

<table id="mytable6" class="display" cellspacing="0" width="100%" style="color:#000">
    <thead>   
        <th>
            單詞
        </th>
        <th>
            次數
        </th>
        <th>
            Key(W)
        </th>
    </thead>
    <!-- 掛上動態資料-->
    <tbody id="MyContent1">
    </tbody>
</table>

JS

        if ( $.fn.dataTable.isDataTable( '#mytable' ) )  //取得mytable 是否已經存放有資料
        { 
            $('#mytable').DataTable().destroy(); //如有資料將其清除
        }
        var DtTree = "";
        for(var i = 0 ; i < arrKnf.length ; i++)
        {
            var strTemp = '';
                strTemp+='<tr><td>'+arrKnf[i]["Name"]+'</td>';
                strTemp+='<td>'+arrKnf[i]["Fire"]+'</td>';
                strTemp+='<td>'+arrKnf[i]["KeyW"]+'</td></tr>';
            DtTree+=strTemp;
        }
        $('#MyContent1').html(DtTree);  //將資料套上HTML DOM


        $('#mytable').DataTable(
            {
                searching: false,   //取消收尋功能
                "order": [0,'desc'] //第一個欄位排序
            });

呈現結果1

將次數條件設定最少為 176 時

呈現結果2