Question

我有一个带有3个标头的jQuery Datatable。一个标题包含两个单选按钮，另一个标题包含一个选择框。默认情况下，会选中其中一个选项。

当我使用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>");

Answer 1

尝试在绘制事件后设置单选按钮：

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

Answer 2

我只是有类似的问题，并通过在this link上以红色阅读问题解决了这个问题。也许它可以帮助你，也许不是，但希望它可以。

Answer 3

我在我的应用程序中构建了很多DataTables，但似乎在某种程度上你试图“暴力破解”服务器端解决方案。从技术上讲，你正在做的是一个基于dom的表，因为你正在输出HTML并使用DataTables格式化它，尽管从$.get出现你可能试图利用服务器端解决方案。服务器端实际上效率要高得多，因为服务器限制了它发送给jQuery的内容，并减少了同时处理数百个（或者我的情况下数百万）记录的需要。显然，采用原始json流并构建表也更快，而不必遍历dom结构来获取相同的信息。

我建议尝试一个真正的服务器端解决方案......唯一的原因是数据直接来自您选择的服务器端技术，并且不会受到严重操纵，因为它显然在这里。所以，首先，设置一个文件（也许是你的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
    } );
   }
  });

- 编辑 - 我添加了fnServerData部分，它是一个将数据发送到查询的回调。在给出的示例中，它将使变量在某个$ _REQUEST字符串中可用，并在查询中使用。您可以使用此选项将所选字段的值返回给查询以提供结果。 - 编辑 -

现在，对于搜索，您必须在源页面添加一些元素来处理排序/过滤/搜索/等。这比声音简单得多......每个变量都通过$ _REQUEST变量传递。检查tutorial online以获取进入的示例以及如何对其进行排序。是的，本教程是用PHP编写的，但重要的部分是确定它传递给你的是什么值，从而可以相应地构建查询。忽略tut的PHP特定元素。如果它仍然令人困惑，我们可以帮助你。

Voila ...更高效，更少混淆，并且几乎完全按照您所说的方式进行操作而不会出现问题。不需要javascript voodoo。

jQuery datatable清除标题中的单选按钮

3 个答案: