Question

我有一个包含四列的基本数据表，其中一个是复选框。当您单击此复选框时，需要将相应列中的所有其他复选框标记为选中状态（标记/删除所有功能）。

最初，我正在初始化一个空的数据表，并且在进行ajax调用后，我只是将一些行添加到表中。

我面临的问题是，当我单击复选框时，我的数据表中的所有数据都被删除并且数据表恢复了初始状态。

我无法理解这里的问题。请提出建议。

function checkAll(field) {
    debugger
    if (field) {
        if (field.checked) {
            // $("input[name='selectedRecords']").attr("checked", true)
            document.getElementById("selectedRecords").checked = true;
        } else {
            // $("input[name='selectedRecords']").attr("checked", false)
            document.getElementById("selectedRecords").checked = false;
        }
    }
}

我的数据表初始化代码：

var oTable = $("#companies").dataTable({
    "sPaginationType": "simple",
    "dom": "<'top'p><'bottom'frti>",
    "bJQueryUI": true,
    /* "sServerMethod": "POST", */
    "bProcessing": false,
    "bServerSide": false
});

Ajax调用：

$.ajax({
    "dataType": "json",
    "type": "GET",
    "url": "/JQueryDataTablesAll/CompanyGsonMatrix",
    "data": null,
    "success": function(d) {
        var wshtml = '';
        wshtml += '<tr>';
        wshtml += '<td>col1</td>';
        wshtml += '<td>col2</td>';
        wshtml += '<td>col3</td>';
        wshtml += '<td><input id="selectedRecords" name="selectedRecords" type="checkbox" checked="checked" /></td>';
        wshtml += '</tr>';
        wshtml += '<tr>';
        wshtml += '<td>col1</td>';
        wshtml += '<td>col2</td>';
        wshtml += '<td>col3</td>';
        wshtml += '<td><input id="selectedRecords" name="selectedRecords" type="checkbox" checked="checked" /></td>';
        wshtml += '</tr>';

        $("#companies > tbody").html(wshtml);
    }
});

表格HTML代码：

<thead>
    <tr>
        <th>Company name</th>
        <th>Address</th>
        <th>Town</th>
        <th><input onclick="checkAll(this)" type="checkbox" checked="checked" /></th>
    </tr>
</thead>
<tbody>
    <% for(Company c: DataRepository.GetCompanies()){ %>
        <tr>
            <td><%=c.getName()%></td>
            <td><%=c.getAddress()%></td>
            <td><%=c.getTown()%></td>
            <td><%=c.getDelete()%></td>
        </tr>
    <% } %>
</tbody>

首先，我得到的数据应该是：

标题伦敦算盘丽晶街酒店删除亚历山德拉剧院站街西米德兰兹郡删除

ajax调用后，它变为以下内容：

标题复选框以标记/删除所有复选框 col1 col2 col3复选框 col1 col2 col3复选框

现在，我单击标记/删除复选框，然后再次得到下面的输出：

标题伦敦算盘丽晶街酒店删除亚历山德拉剧院站街西米德兰兹郡删除

复选框事件后数据表恢复到初始状态

0 个答案: