将表更改为数据表答案

【问题标题】：change table into dataTable将表更改为数据表
【发布时间】：2017-03-20 12:17:30
【问题描述】：

请有人指导我如何将我的表格更改为 dataTable。

我的表格将使用以下代码动态加载。

$.post('geterpitem',{grn : $('#grn').val()}, function(responseJson) {
    if(responseJson.length!=null){
        var $tbl = $("#itemtable");
        $tbody = $tbl.find('tbody');
        $tbl.find("tr:gt(0)").remove();
        var i = 1;
        $.each(responseJson, function(key,value) {
            var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
            rowNew.children().eq(0).append(i);
            rowNew.children().eq(1).text(value['itemcode']); 
            rowNew.children().eq(2).text(value['itemname']); 
            rowNew.children().eq(3).text(value['receivedqty']);
            rowNew.children().eq(4).html('<input type="text"  id="inspdate"/>');
            rowNew.children().eq(5).html('<input type="text"  id="accqty" onkeypress="return isNumber(event)"/>');
            rowNew.children().eq(6).html('<input type="text"  id="rejqty" class="reject"/>');
            rowNew.children().eq(7).html('<input type="text"  id="rema"/>');
            rowNew.appendTo($tbody);
            i++;
        });
    }
}

由于我是新手，请有人帮我做。

【问题讨论】：

试试这个链接，datatables.net/examples/data_sources/dom.html。从您的代码中观察到，用 JavaScript 编写 html 不是一个好方法，而是使用一些 html 模板，例如 mustache。

标签： javascript jquery datatables

【解决方案1】：

试试这样的

HTML

<table id="searchResultTable"  class="display">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
        </tr>
    </thead>
    <tbody id="resultscontainer">
    </tbody>
</table>

脚本

searchResultTable = $("#searchResultTable").dataTable({
    "lengthMenu": [20],
    "order": [[1, "desc"]],
    "ordering": false,
    "bFilter": false
});

searchResultTable.on('click', 'tr', DataTableRowClickEventHandler);

searchResultTable.fnClearTable();
for(i=0; i<response.length; i++){

    ....get values for Col1, Col2, Col3, Col4....

    searchResultTable.fnAddData([Col1, Col2, Col3, Col4]);
}

尝试下面提到的链接以获取更多文档和示例，

https://datatables.net/examples/ajax/simple.html

【讨论】：