jQuery datatable清除header中的单选按钮

jQuery datatable clears radio button in header

本文关键字:单选按钮 header datatable 清除 jQuery      更新时间:2023-09-26

我有一个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:&nbsp;");
    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的元素。如果你还是不明白,我们可以帮助你。

瞧……在我的应用程序中,更高效,更少混乱,并且几乎完全按照您所说的那样工作,没有任何问题。