jquery - asp.net 中继器和 jQuery 数据表分页和复选框不起作用

Question

我正在使用 jquery 数据表插件和 asp.net 转发器。我只是在中继器的第一列中有一个复选框，以允许用户检查他们想要将哪条记录保存到数据库中。我有中继器、jquery 插件，分页工作 100%。我无法解决的问题是，当我选中多个页面上的复选框并点击提交时，我只能获取当前页面复选框，因为所有其他选中的复选框都变为未选中状态。

.net 标记

<script type="text/javascript">
var oTable;
$(document).ready(function () {

    oTable = $('#tblList').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bServerSide": false,
        "iDisplayLength": 7,
        "aaSorting": [[1, "asc"]],
        "bFilter": true,
        "bLengthChange": false,
        "aoColumns": [
        /* other columns */null, null, null, null],
        "sDom": 'T<"toolbar">lrtip'
    });
});
</script>
<asp:Panel ID="pnlPages" runat="server" Visible="false">
<asp:Repeater ID="rptList" runat="server" OnItemDataBound="RptList_ItemDataBound">
        <HeaderTemplate>
            <table id="tblList" cellpadding="0" cellspacing="0" border="0" class="display">
                <thead>
                    <tr>                                
                        <th></th>                                
                        <th>Name</th>                                        
                        <th>Status</th>                            
                        <th>Modified</th>
                    </tr>
                </thead>
            <tbody>
        </HeaderTemplate>
        <ItemTemplate>
                <tr>
                    <asp:HiddenField ID="hdnID" runat="server" Value='<%# Eval("ID") %>' />
                    <td style="width: 5%"><asp:CheckBox ID="chkSelected" runat="server" OnCheckedChanged="Save_OnChecked" AutoPostBack="true" value='<%# Eval("ID") %>' /></td>
                    <td style="width: 47%"><%# Eval("Name")%></td>
                    <td style="width: 7%"><%# Eval("Status") %></td>
                    <td style="width: 25%"><%# ((DateTime)Eval("DateModified")).ToShortDateString() %></td>
                </tr>
        </ItemTemplate>
        <FooterTemplate>
            </tbody> 
        </table>
        </FooterTemplate>
    </asp:Repeater>
    </asp:Panel>

在页面加载时，我调用以下方法并提供列表

public void DisplayList(List<MyPages> list)
    {
        rptList.DataSource = list;
        rptList.DataBind();
        pnlPages.Visible = true;
    }

这个方法检查数据库中的框

protected void RptList_ItemDataBound(Object Sender, RepeaterItemEventArgs e)
    {
        string groupID = !string.IsNullOrEmpty(Request.QueryString["id"]) ? Request.QueryString["id"] : string.Empty;
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            HiddenField pageID = (HiddenField)e.Item.FindControl("hdnID");
            GroupPage groupPage = groupsPresenter.GetByKeys(new Guid(groupID), new Guid(pageID.Value));

            if (groupPage != null)
            {
                CheckBox chk = (CheckBox)e.Item.FindControl("chkSelected");
                chk.Checked = true;
            }
        }
    }

以上代码均有效。这是它停止工作的地方。当用户选中某个框时，将执行以下代码。

protected void Save_OnChecked(object sender, EventArgs e)
    {
        CheckBox chk = (CheckBox)sender;
        string id = chk.Attributes["value"].ToString();
    }

我在调试时注意到，如果我在第一页上选中了 4 行，然后我转到第二页并取消选中一个框，则会调用 Save_OnChecked 事件，并且主页上的所有复选框都会取消选中。因此 Save_OnChecked 总共被调用 5 次。

如果我没有使用数据表分页和第一页上的所有记录，它就可以正常工作。希望这是有道理的，我希望有人能帮助我。

Answer 1

当分页事件发生时，jquery datatables 插件会完全替换所有 DOM 元素。前一页的数据已完全删除，因此丢失。

您需要在 jQuery 插件更改页面时发送 AJAX 帖子，或者将数据保存在您自己的 JavaScript 中以保留在其他页面上选中的复选框。任何一种解决方案都会起作用。您想采用哪种储蓄方式取决于您。在页面更改时自动保存，或将列表保留在内存中，直到他们点击保存/发布按钮。

然后，您可以通过 C# 代码隐藏 (Save_OnChecked) 读取的自定义 AJAX/POST 参数将保存在 JavaScript 内存中的所有选中项目发送到服务器，而不是直接读取表单复选框值，因为这些只会显示最近显示的页面的数据。

datatables 插件的 fnPageChange ( API documentation ) 似乎没有 onchange 类型的钩子(Hook)来绑定(bind) JavaScript 函数以在 JS 中的页面更改事件中保存数据。您可能需要修改插件才能调用您的自定义代码。或者您可以设置一个 jQuery 委托(delegate)来监视插件动态创建的页面更改链接上的所有点击。