Question

我正在使用：jquery.dataTables.js来自：https://datatables.net

我希望我的json显示为现在，但是当显示在页面中时，显示乱序，我希望json显示如下：1,2,3,4,5或者只是顺序是现在与数字无关，只是跟随json。

所以在我的数据表中应该显示如下： eua，中国，西班牙，西班牙，中国。

这是我的运行：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列列在第3位，因此从零开始的数字2，所以您应该这样做：

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

Answer 2

只需更改初始化中的顺序即可。即订单：[[2，＆＃34; asc＆＃34; ]，

完整代码如下

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

Jquery Datatable没有正确地重新排序我的json

2 个答案: