Question

有人请指导我如何将我的表格更改为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++;
        });
    }
}

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

Answer 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

将表更改为dataTable

1 个答案: