[英]jQuery datatable clears radio button in header
我有一个带有 3 个标题的 jQuery 数据表。 一个 header 包含两个单选按钮,另一个 header 包含一个 select 框。 默认情况下,选中其中一个选项。
当我在 Datatable 中使用搜索 function 搜索特定记录时,它不显示选中了哪个单选按钮。 我在使用数据表搜索后检查了 DOM,输入元素仍然包含 CHECKED 属性。 select 盒子不受影响。 它仍然保留了 select 框的值。
此外,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");
我刚刚遇到了类似的问题,并通过阅读此链接上的红色问题解决了它。 也许它可以帮助你,也许不能,但希望它可以。
我在我的应用程序中构建了很多 DataTable,但在某种程度上,您似乎正在尝试“蛮力”服务器端解决方案。 从技术上讲,您正在做的是一个基于 dom 的表,因为您正在输出 HTML 并使用 DataTables 对其进行格式化,尽管从$.get
中可以看出您可能正在尝试利用服务器端解决方案。 服务器端实际上效率更高,因为服务器限制了它发送到 jQuery 的内容,并减少了一次处理数百(或在我的情况下为数百万)记录的需要。 显然,采用原始 json stream 并构建表也更快,而不必遍历 dom 结构以获得相同的信息。
我建议尝试一个真正的服务器端解决方案.....唯一的原因是数据直接来自您选择的服务器端技术,并且不会像这里那样被严重操纵。 因此,首先,将您的文件(可能是您的 store_handler.ashx)设置为 output 您在 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
} );
}
});
-- 编辑 -- 我添加了 fnServerData 部分,这是一个将数据发送到查询的回调。 在给出的示例中,它将使变量 something 和 somethingelse 在 $_REQUEST 字符串中可用,以便在查询中使用。 您可以使用它来将选定字段的值返回给查询以提供结果。 - 编辑 -
现在,对于搜索,您必须在源页面中添加一些元素来处理排序/过滤/搜索/等。 这比听起来要简单得多...每个变量都通过 $_REQUEST 变量传递。 查看在线教程以获取有关内容以及如何对其进行排序的示例。 是的,教程在 PHP 中,但重要的部分是确定它传递给您的值,然后您可以相应地构建查询。 忽略 tut 的 PHP 特定元素。 如果您仍然感到困惑,我们可以为您提供帮助。
瞧……更高效,更少混乱,并且几乎完全按照您所说的在我的应用程序中工作,没有问题。 不需要 javascript 巫毒。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.