Jquery Datatables price结果如何排序显示？

Question

我对 Jquery 数据表一窍不通。我有一个关于如何使用排序插件的非常基本的问题：已经在谷歌上搜索了很多，但我没有得到关于如何将它们合并到我的代码中的正确答案

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<table  id="kiran">
        <thead>
                    <tr>
                      <th class="hidden-480">Name</th>
                      <th class="hidden-480">Price</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
  </table>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
  <script>
  $(function(){
    //$("#kiran").dataTable();

     $('#kiran').dataTable({

         "order": [[ 1, "desc" ]],
          "aaSorting": [[1, 'desc']],



       });


    displayData();
  })

function displayData()
{

  var json = [
    {
        "Name": "ONE",
        "Price": "12"
    },
    {
        "Name": "TWO",
        "Price": "100"
    },
    {
        "Name": "THREE",
        "Price": "42"
    }
]



for(var i=0;i<json.length;i++)
{

var name = json[i].Name;
var price = json[i].Price;

              $('<tr>').append(
              $("<td width='20%''>").text(name),
                $("<td  width='25%'>").text(price)

              ).appendTo('#kiran');


}

}


  </script>
</body>
</html>

这是我的 jsfiddle

http://jsfiddle.net/pg1k5aww/

有人可以帮忙解决这个问题吗？？

Answer 1

如@charlietfl 所说，您不能直接将数据渲染到 table，我对您的 fiddle 做了一些更改，这是我的方法。 http://jsfiddle.net/5tszcz2q/

我将数据移动到一个 var

var data = [
    {
        "Name": "ONE",
        "Price": "12"
    },
    {
        "Name": "TWO",
        "Price": "100"
    },
    {
        "Name": "THREE",
        "Price": "42"
    }
];

然后我把你的数据table改成了这个配置

"aaData": data, //set the datatables data to the json var previously created
//mapped each column to the respective data it must present
"aoColumns": [
    { "mData": "Name" }, 
    { "mData": "Price" },
 ],

Jquery Datatables price结果如何排序显示？

Jquery Datatables How to display the results of price in the sorting order?

jquery

datatables