Jquery DataTable排序数值列无法正常工作答案

【问题标题】：Jquery DataTable Sorting Numeric value column not working properlyJquery DataTable排序数值列无法正常工作
【发布时间】：2013-05-30 09:12:55
【问题描述】：

在我的 Asp.net 应用程序中，我有一个 Gridview 控件并将其绑定到后面的代码中。
在客户端，我使用Jquery DataTable version 1.9.4 来获得更好的排序、搜索功能，这里我遇到了一个问题，数值排序不正确。

我用谷歌搜索并知道使用sType": "numeric" 将解决，但是当我使用它时，我的整个工作都停止了，我的列位于 9 位置，所以我设置aTragets 9

这是JS FIDDLE

Javascript：

$(document).ready(function () {
    $('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
       // "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]

       });
  });

后面的代码：在 Page_PreRender 上

if (GridView3.Rows.Count > 0)
        {
            GridView3.UseAccessibleHeader = true;
            GridView3.HeaderRow.TableSection = TableRowSection.TableHeader;
        }

在页面加载：

GridView3.DataSource = sortedDT;
GridView3.DataBind();

【问题讨论】：

你还有用逗号分隔的数值吗？对于前 1,2 ？
@MaVRoSCy：不仅是十进制值，比如 `10.5, 13.5' 等等，但它们既不是空格也不是逗号，我尝试了你的解决方案，但仍然没有修复
你能把表格数据粘贴到小提琴jsfiddle.net吗？

标签： javascript jquery gridview datatable datatables

【解决方案1】：

我认为aaSorting是你必须使用的

$(document).ready(function () {
  $('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
      "aaSorting": [[ 9, "asc"]], /*row count starts from 0 in datatables*/
      "bJQueryUI": true,
      "sPaginationType": "full_numbers"
     // "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]

     });
});

更新

问题如我的评论It clearly does not understand the numeric datatype of the column 所述。你的问题是在你的......你也有文字。

查看工作小提琴http://jsfiddle.net/6Pxwy/1

【讨论】：

感谢您的回复，它仍然无法正确排序，但现在使用"aaSorting": [[ 9, "asc"]], 其他功能工作正常，
究竟是什么不正确？你有错误吗？还是数据表功能问题？
如果您有任何其他初始化代码也显示它，以便我们全面了解您正在做什么以及可能出现的问题
我更新了我的问题，我没有收到任何错误但排序不正确，因为你可以看到两个图像asc/descbillinglosthrs 列的顺序
谢谢我解决了，早些时候我在我的gridview中使用带有标签的项目模板，所以它转换为跨度，现在我使用了BoundFiels并且它工作正常

【解决方案2】：

我就是这样解决的：

带有项目模板的网格视图：

在Item模板中它们可能是标签控件，所以它转换为span，我们需要删除那个span标签，即html标签使用.contents().unwrap();

代码：

$("#Gridview_ID span").contents().unwrap();
$('#Gridview_ID ').dataTable({
       "bJQueryUI": true,
       "sPaginationType": "full_numbers",
        "aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
         });

带有绑定字段的网格视图：

$('#Gridview_ID ').dataTable({
   "bJQueryUI": true,
   "sPaginationType": "full_numbers",
    "aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
     });

【讨论】：