jQuery datatable清除header中的单选按钮
jQuery datatable clears radio button in header
我有一个jQuery数据表3头。一个标头包含两个单选按钮,另一个标头包含一个选择框。默认情况下,选中其中一个选项。
当我使用Datatable中的搜索函数搜索特定记录时,它不显示选中了哪个单选按钮。在使用了数据表搜索之后,我检查了DOM,输入元素仍然包含CHECKED属性。选择框不受影响。它仍然保留选择框的值。
同样,IE表现良好。O_o FF和Chrome无法识别选中的值。
我试了一个$(selector).datatable().fnDraw();
…不行。
如何让数据表在搜索之后或搜索过程中识别选中的属性?有人经历过类似的事情吗?
任何帮助都是感激的。谢谢。
编辑:经过进一步的调查,看起来fnDraw正在清除单选按钮的值。初始化数据表(Javascript)
$.get('store_handler.ashx', { cmd: '9', pubId: pubId, sub: sub }, function(o) {
$("#researchTableDiv").html(o.datatableContent);
$('#ResearchTable').dataTable({
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": "450px",
"bSort": false
});
if (o.radioCheck == "single")
$('#radioSingle').attr("checked", "checked");
else
$('#radioSub').attr("checked", "checked");
}, "json");
数据表头的HTML (c# .Net)
htmlString.Append("<thead>");
htmlString.Append("<tr>");
htmlString.Append("<th valign='"middle'" style='"width: 200px; text-align: left;valign:top;border-right:0px;padding-bottom:0px'" class='"header'">Filter: ");
htmlString.Append("<select name='"nonSort2'" style='"height:20px;padding:0px;margin-top:-0px;font-size:11px'">");
htmlString.Append("<option value='"AKLPH'">All</option>");
htmlString.Append("<option value='"-'">---------------</option>");
htmlString.Append("<option value='"AK'">Alaska</option>");
htmlString.Append("<option value='"AL'">Etc...</option>");
htmlString.Append("</select>");
htmlString.Append("</th>");
htmlString.Append("<th align='"left'" class='"header'" >");
if (sub == "0")
{
htmlString.Append("<input type='"radio'" value='"0'" name='"rdoSubscription'" id='"radioSingle'" checked='"CHECKED'" style='"margin-left:1px'"/>Single Report");
htmlString.Append("<input type='"radio'" value='"1'" name='"rdoSubscription'" id='"radioSub'" onclick='"getPubDetails('" + pubId + "','1');'" style='"margin-left:1px'"/>Subscription");
jOut.Put("radioCheck", "single");
}
else
{
htmlString.Append("<input type='"radio'" value='"0'" name='"rdoSubscription'" id='"radioSingle'" onclick='"getPubDetails('" + pubId + "','0');'" style='"margin-left:1px'"/>Single Report");
htmlString.Append("<input type='"radio'" value='"1'" name='"rdoSubscription'" id='"radioSub'" checked='"CHECKED'" style='"margin-left:1px'"/>Subscription");
jOut.Put("radioCheck", "sub");
}
htmlString.Append("</th>");
htmlString.Append("<th class='"header'" align='"center'">Action</th>");
htmlString.Append("</tr>");
htmlString.Append("</thead>");
尝试在绘制事件后设置单选按钮:
$.get('store_handler.ashx', { cmd: '9', pubId: pubId, sub: sub }, function(o) {
$("#researchTableDiv").html(o.datatableContent);
$('#ResearchTable').dataTable({
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": "450px",
"bSort": false,
"fnDrawCallback": function() {
if (o.radioCheck == "single")
$('#radioSingle').attr("checked", "checked");
else
$('#radioSub').attr("checked", "checked");
}
}
});
}, "json");
我只是有一个类似的问题,并通过阅读这个链接上的红色问题来解决它。也许它能帮到你,也许不能,但希望它能。
我在我的应用程序中构建了很多数据表,但似乎在某种程度上你试图"暴力"一个服务器端解决方案。从技术上讲,您正在做的是一个基于dom的表,因为您正在输出HTML并使用DataTables对其进行格式化,尽管从$.get
来看,您可能正在尝试利用服务器端解决方案。服务器端实际上要高效得多,因为服务器限制了它发送给jQuery的内容,减少了一次处理数百条(或在我的情况下数百万条)记录的需要。显然,采用原始json流并构建表也比遍历dom结构以获得相同的信息更快。
我建议尝试一个真正的服务器端解决方案.....唯一的原因是数据直接来自您所选择的服务器端技术,并且不会像这里那样受到严重的操纵。因此,首先,设置您的a文件(也许是您的store_handler.ashx),以便以JSON格式输出您需要的内容(此操作的最有效传输方法)。字符串应该看起来像这样:
{"sEcho": 1, "iTotalRecords": 1, "iTotalDisplayRecords": 1, "aaData":[["one", "for", "each", "column"]]}
确保在执行此操作时首先将JSON输出到屏幕上,并通过jsonlint.com测试它以确保有效性
然后,jQuery看起来像这样:$('#detailstable').dataTable( {
"aaSorting": [[ 1, "asc" ]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "handler.ashx",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bLengthChange": true,
"bPaginate": true,
"bSort": true,
"iDisplayLength": 10,
"bInfo": true,
"aoColumns": [
{ "sTitle": "One", "sWidth": "15%" , "sClass":"center"},
{ "sTitle": "For", "sWidth": "15%" , "sClass":"center"},
{ "sTitle": "Each", "sWidth": "15%", "sClass":"center" },
{ "sTitle": "Column", "sWidth": "15%" , "sClass":"center"}
],
"fnServerData": function ( sSource, aoData, fnCallback ) {
var something = $('#something').val();
var somethingelse = $('#somethingelse').val();
aoData.push( { "name": "something", "value": something },
{ "name": "somethingelse", "value": somethingelse }
);
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
});
——edit——我添加了fnServerData部分,这是一个回调,将数据发送到查询。在给出的示例中,它将使变量something和somethingelse在查询中使用的$_REQUEST字符串中可用。您可以使用它将所选字段的值返回给查询,从而得到结果。——edit——
现在,对于搜索,您必须在源页面中添加一些元素来处理排序/过滤/搜索等。这比听起来简单多了……每个变量都通过$_REQUEST变量传递。查看在线教程的示例,了解进来的内容以及如何进行排序。是的,教程是在PHP,但重要的部分是计算什么值传递给你,从你可以相应地构建你的查询。忽略tut中特定于PHP的元素。如果你还是不明白,我们可以帮助你。
瞧……在我的应用程序中,更高效,更少混乱,并且几乎完全按照您所说的那样工作,没有任何问题。
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时,jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 客户端单选按钮列表验证
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 单击时如何更改单选按钮的CSS
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 注入Javascript以选择具有指定值的所有单选按钮
- 复选框/单选按钮-添加所选项目的总价
- 如何使用单选按钮设置cookie值
- Html按钮点击事件未触发单选按钮
- jQuery datatable清除header中的单选按钮