Javascript Jquery Datatable未正确重新排序json

我使用的是：jquery.dataTables.js，来自：

我希望我的json显示为现在，但当显示在页面中时，显示的顺序不正确，我希望json显示如下：1,2,3,4,5或只是顺序现在并不重要，只是在json之后

因此，在我的数据表中应该显示如下：欧盟、中国、西班牙、西班牙、中国。

这是我的跑步记录：

我有这个json文件：

{
  "data": [
    {
      "order": 1, 
      "place": "EUA", 
      "name": "Cannon Morin", 
      "delete": " <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i> <i class=\"fa fa-minus-square\" aria-hidden=\"true\"></i>"
    }, 
    {
      "order": 2, 
      "place": "China", 
      "name": "Neva Allison", 
      "delete": " <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i> <i class=\"fa fa-minus-square\" aria-hidden=\"true\"></i>"
    }, 
    {
      "order": 3, 
      "place": "Spain", 
      "name": "Rodriquez Gentry", 
      "delete": " <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i> <i class=\"fa fa-minus-square\" aria-hidden=\"true\"></i>"
    }, 
    {
      "order": 4, 
      "place": "Spain", 
      "name": "Rodriquez Gentry", 
      "delete": " <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i> <i class=\"fa fa-minus-square\" aria-hidden=\"true\"></i>"
    }, 
    {
      "order": 5, 
      "place": "China", 
      "name": "Neva Allison", 
      "delete": " <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i> <i class=\"fa fa-minus-square\" aria-hidden=\"true\"></i>"
    }
  ]
}

html:

地方
名称
秩序
行动
选择1
选择2
选择3
在此处拖放一个名称
在此处插入订单号

jquery：

 $(document).ready(function() {

      var table;

      $("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
        table.row($(this).closest("tr")).remove().draw();
      })

      $("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {

        $(this).removeClass().addClass("fa fa-envelope-o");
        var $row = $(this).closest("tr").off("mousedown");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).text();
          $(this).html("").append("<input type='text' value=\"" + txt + "\">");
        });

      });

      $("#example").on('mousedown', "input", function(e) {
        e.stopPropagation();
      });

      $("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {

        $(this).removeClass().addClass("fa fa-pencil-square");
        var $row = $(this).closest("tr");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).find("input").val()
          $(this).html(txt);
        });
      });


      $("#example").on('mousedown', "#selectbasic", function(e) {
        e.stopPropagation();
      });


      var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
      table = $('#example').DataTable({
        ajax: url,
        order: [[ 0, "desc" ]],
        rowReorder: {
          dataSrc: 'place',
          selector: 'tr'
        },
        columns: [{
          data: 'place'
        }, {
          data: 'name'
        }, {
          data: 'order'
        }, {
          data: 'delete'
        }]
      });

      $('#example').css('border-bottom', 'none');
      $('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');

      // add row
      $('#addRow').click(function() {
        //t.row.add( [1,2,3] ).draw();
        var rowHtml = $("#newRow").find("tr")[0].outerHTML
        console.log(rowHtml);
        table.row.add($(rowHtml)).draw();
      });
    });

$（文档）.ready（函数（）{
var表；
$（“#示例”）.on（“鼠标向下”，“td.fa.fa减去平方”，函数（e）{
table.row（$（this.closest（“tr”））.remove（）.draw（）；
})
$（“#示例”）.on（'mousedown.edit'，“i.fa.fa铅笔方块”，函数（e）{
$（this.removeClass（）.addClass（“fa-信封-o”）；
var$row=$（this.recessed（“tr”）.off（“mousedown”）；
var$tds=$row.find（“td”）.not（“：first”）.not（“：last”）；
$。每个（$tds，功能（i，el）{
var txt=$（this.text（）；
$（this.html（“”）.append（“”）；
});
});
$（“#示例”）.on（'mousedown'，“input”，函数（e）{
e、 停止传播（）；
});
$（“示例”）.on（'mousedown.save'，“i.fa.fa-envelope-o”，函数（e）{
$（this.removeClass（）.addClass（“fa-fa铅笔方块”）；
var$row=$（this.closest（“tr”）；
var$tds=$row.find（“td”）.not（“：first”）.not（“：last”）；
$。每个（$tds，功能（i，el）{
var txt=$（this.find（“input”）.val（）
$（this.html（txt）；
});
});
$（“#示例”）.on（'mousedown'，“#selectbasic”，函数（e）{
e、 停止传播（）；
});
var url='1〕http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
table=$（“#示例”）.DataTable({
ajax:url，
订单：[[0，“描述”]，
行重新排序：{
dataSrc:'地点'，
选择器：“tr”
},
栏目：[{
数据：“地点”
}, {
数据：“名称”
}, {
数据：“订单”
}, {
数据：“删除”
}]
});
$（'#示例'）.css（'border-bottom'，'none'）；
$（“添加新行”）.insertAfter（“#示例”）；
//添加行
$（'#addRow'）。单击（函数（）{
//t、 行添加（[1,2,3]）.draw（）；
var rowHtml=$（“#newRow”）.find（“tr”）[0]。outerHTML
log（rowHtml）；
table.row.add（$（rowHtml））.draw（）；
});
});

您已按第一列按降序对表格进行了明确排序：

    order: [[ 0, "desc" ]],

由于您的第一列不是

order

列，因此它不是您想要的排序

您的

order

列列列在第三位，因此以零为基数的数字2，您应该执行以下操作：

    order: [[ 2, "asc" ]],

---

只需更改初始化中的顺序。i、 e.订单：[[2，“asc”]]

完整代码如下所示

   table = $('#example').DataTable({
    ajax: url,
    order: [[ 2, "asc" ]],
    rowReorder: {
      dataSrc: 'place',
      selector: 'tr'
    },
    columns: [{
      data: 'place'
    }, {
      data: 'name'
    }, {
      data: 'order'
    }, {
      data: 'delete'
    }]
  });

    order: [[ 2, "asc" ]],

   table = $('#example').DataTable({
    ajax: url,
    order: [[ 2, "asc" ]],
    rowReorder: {
      dataSrc: 'place',
      selector: 'tr'
    },
    columns: [{
      data: 'place'
    }, {
      data: 'name'
    }, {
      data: 'order'
    }, {
      data: 'delete'
    }]
  });