Question

I have a jQuery Datatable with 3 headers. One header contains two radio buttons, another header contains a select box. By default, one of the options is checked.

When I use the search function in the Datatable to search for specific records, it does not display which radio button was checked. I inspected the DOM after I used the datatable search, and the input element still contains the CHECKED attribute. The select box is not affected. It still retains the value of the select box.

Also, IE behaves fine. O_o FF and Chrome are not recognizing the checked value.

I tried a $(selector).datatable().fnDraw();… no dice.

How do I get the datatable to recognize the checked attribute after, or during, the search? Has anyone experienced something similar?

Any help is appreciated. Thanks.

Edit: After further investigation, it looks like the fnDraw is clearing the value of the radio button.

Code

Initialize datatable (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 of datatable headers (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>");

Answer 1

Try setting the radio button after the draw event:

$.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");