我正在使用jquery datatables插件和asp.net转发器。我在转发器的第一列中只有一个复选框，允许用户检查要保存到数据库的记录。我有中继器，分页工作100％的jquery插件。我无法解决的问题是，当我在多页上选中一个框并单击“提交”时，由于所有其他复选框均未选中，因此我只能获得“当前页面”复选框。
.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次。
如果我没有使用数据表分页以及所有记录在第一页上的位置，那么它就可以正常工作。希望这是有道理的，我希望有人可以帮助我。
最佳答案
发生页面调度事件时，jquery datatables插件将完全替换所有DOM元素。前一页的数据已被完全删除，因此将丢失。
您可能需要在jQuery插件更改页面时发送AJAX帖子，或者将数据保存在您自己的JavaScript中以保留在其他页面上选中的复选框。两种解决方案都可以。由您决定要进行哪种保存方式。在页面更改时自动保存，或将列表保留在内存中，直到他们点击“保存/发布”按钮。
然后，您将通过自定义AJAX / POST参数（将读取C＃代码背后的代码（Save_OnChecked））将保存在JavaScript内存中的所有选中项发送到服务器，而不是直接读取表单复选框的值，因为仅显示最近显示页面的数据。
datatables插件的fnPageChange（API documentation）似乎没有onchange-type挂钩来绑定您的JavaScript函数以在JS中的页面更改事件中保存数据。您可能需要修改插件才能调用自定义代码。或者，您可以设置一个jQuery委托来监视插件动态创建的页面更改链接上的所有单击。
关于jquery - asp.net转发器和jQuery数据表分页和复选框不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9120077/