Question

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

.net Markup

<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-type挂钩来绑定JavaScript函数以在JS中的页面更改事件中保存数据。您可能必须修改插件才能调用自定义代码。或者你可以设置一个jQuery委托来观察插件所有动态创建的页面更改链接。

asp.net转发器和jQuery datables分页和复选框不起作用

1 个答案: