jQuery dataTable sort with ajax loaded data

Question

I have several rows that include some lazy loaded data. For instance,

    <table border="1">
      <tr>
          <th>Employee</th><th>Sales</th>
      </tr>
      <tr>
          <td>Michale</td><td>1000</td>
      </tr>
      <tr>
          <td>Kim</td><td id="kimSales"></td>
      </tr>
      <tr>
          <td>John</td><td id="johnSales"></td>
      </tr>
    </table>

The problem is, I have to retrieve some data after page loaded because of some reasons. Let's suppose kimSales is 1500, and johnSales is 2500.

<script>
    $(document).on('ready', function(e){
         $('#kimSales').text(1500);
         $('#johnSales').text(2500);
    })     
</script>

In this situation, I want to sort properly with lazy loaded data. You know, jQuery dataTable has sorting features through click header of columns, like https://datatables.net I couldn't sort these data properly. The sorted data is not ascending, or dsc --- maybe dataTable couldn't recognize after loaded data.

What I tried :

<script>
    $(document).on('ready', function(e){
         $('#kimSales').text(1500);
         $('#johnSales').text(2500);
    })

    table.dataTable(); // not properly working
</script>

Can you explain the question properly. What exactly is the issue? The values are not showing in the table? — laiju
– laiju, Commented Nov 30, 2017 at 6:34
@laiju Values are showing properly but I couldn't sort the data with ascending or desc, it's not properly work — ton1
– ton1, Commented Nov 30, 2017 at 6:35

Hrishikesh · Accepted Answer · 2017-11-30 06:36:39Z

3

I hope you want to achieve sorting based on the second column. Try this in the table initialization code and with your preferred sorting technique [asc,desc]

 $('table').DataTable( {
        "order": [[ 1, "desc" ]]
    } );

answered Nov 30, 2017 at 6:36

Hrishikesh

6323 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gyrocode.com · Accepted Answer · 2017-11-30 14:11:23Z

If you update cell's data BEFORE initializing the table, it should work correctly.

Also you should be initializing the table in ready event handler. For example:

$(document).on('ready', function(e){
     $('#kimSales').text(1500);
     $('#johnSales').text(2500);

     var table = $('#example').DataTable();
});

If you update cell's data AFTER initializing the table, you need to use cell().invalidate() API method and redraw the table.

For example:

$(document).on('ready', function(e){
     var table = $('#example').DataTable();

     $('#kimSales').text(1500);
     table.cell($('#kimSales').closest('td')).invalidate();

     $('#johnSales').text(2500);
     table.cell($('#johnSales').closest('td')).invalidate();

     table.draw();
});

Collectives™ on Stack Overflow

jQuery dataTable sort with ajax loaded data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related