Question

我有一个将使用jQuery动态加载的表。

我想将其更改为DataTable以获得更好的视图和滚动/分页。

由于我是新手，我不确定获取预期数据的正确程序。

所以如果有人指导我如何将我的下面的代码更改为DataTable以及滚动/分页提示，我将不胜感激。

同样值得怀疑的是，我们是否可以将用户可编辑的表格映射到DataTable中？

//get item list from erp tables
$.post('geterpitem', {
    grn: $('#num').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="accep" onkeypress="return isNumber(event)"/>');
            rowNew.children().eq(6).html('<input type="text"  id="rejec"/>');
            rowNew.children().eq(7).html('<input type="text"  id="rema"/>');
            rowNew.appendTo($tbody);
            i++;
        });
    } else {
        alert("No item found!!");
    }
});
$(document).ready(function() {
    $('#itemtable').DataTable()
});

<table border="1px" cellpadding="0" cellspacing="0" class="display" id="itemtable">
    <thead>
        <tr>
            <th>SLno</th>
            <th>Item code</th>
            <th>Item name</th>
            <th>Received qty</th>
            <th>Insp Date</th>
            <th>Accepted qty</th>
            <th>Rejected qty</th>
            <th>Remarks</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Answer 1

当数据表可以为您完成所有操作时，您手动创建表。以下是未经测试的，但我会根据您的代码进行操作。

var childUpdates = [String: Int]()
let numberProfiles = 10

for index in 1...numberProfiles {
    childUpdates["/profiles/user_id/id_profile_\(index)/selected"] = -1 
}
ref.updateChildValues(childUpdates)

Answer 2

要将任何 html 表转换为数据表，请遵循以下简单步骤：

只需使用以下三个库即可将高级交互控件添加到您的 HTML 表格中：

CSS
jQuery 库
DataTable JS 库

在头部下方添加

<head>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com//ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

在关闭正文前添加 (</body>)

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
    $(function () {
        $('#tableId').DataTable();
    });
</script>

将表更改为dataTable

2 个答案: