1

I am using: jquery.dataTables.js from: https://datatables.net

I expect to my json be displayed as now, but when show in the page , shows out of order, i would like the json be displayed like bellow following:1,2,3,4,5 or just the order is now does not matter the numbers but just following the json.

so in my datatable should be showing as bellow: eua,china,spain,spain,china.

this is my plunk running: http://plnkr.co/edit/mQIpriwqOhB59QPYbKHj?p=preview

I have this json file:

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

2 Answers 2

2

You have explicitly ordered your table by the first column, in descending order:

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

and since your first column is not the order column, it is not sorting as you want it.

Your order column is listed in 3rd place, so with zero-based number 2, and so you should do:

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

Just change the order in the initialization. i.e. order: [[ 2, "asc" ]],

The full code will be as follows

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.