jQuery的數據表不能重新排序的json正常

Question

我使用：從jquery.dataTables.js：https://datatables.net

我希望我的JSON顯示爲現在，而當顯示在頁面上，顯示出來的，我願意像json一樣顯示如下：1,2,3,4,5或者現在的順序現在無關緊要，只是跟在json之後。

所以在我的數據表應該顯示爲波紋管：歐亞，中國，西班牙，西班牙，中國。

這是我的普拉克運行：http://plnkr.co/edit/mQIpriwqOhB59QPYbKHj?p=preview

我有這個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>" 
    } 
    ] 
} 

CSS：

div.addRow { 
    line-height: 45px; 
    background-color: #fff; 
    padding-left: 10px; 
    border-bottom: 1px solid; 
    border-top: 1px solid #e5e5e5; 
} 

HTML：

<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
     <tr> 
     <th>place</th> 
     <th>name</th> 
     <th>order</th> 
     <th>action</th> 
     </tr> 
    </thead> 
    </table> 


    <table id="newRow" style="display:none"> 
    <tbody> 
     <tr> 
     <td> 
      <select id="selectbasic" name="selectbasic" class="form-control"> 
      <option value="1">option 1</option> 
      <option value="2">option 2</option> 
      <option value="2">option 3</option> 
      </select> 
     </td> 
     <td>Drag and drop a name here 
     </td> 
     <td> 
      insert order number here</td> 
     <td><i class="fa fa-pencil-square" aria-hidden="true"></i> 
      <i class="fa fa-minus-square" aria-hidden="true"></i> </td> 
     </tr> 
    </tbody> 
    </table> 

的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(); 
     }); 
    }); 

Answer 1

您已經明確地通過第一列排序你的表，按降序排列：

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

，並因爲你的第一列是不是order列，它不排序，只要你想它。

你order列在第三名與基於零號2上市，所以，所以你應該做的：

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

Answer 2

只要改變在初始化的順序。即命令：[[2， 「ASC」]，

完整的代碼將如下

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