How would I manipulate data in an existing table?

AnubisJP

I have a DataTable already loaded in my page which contains columns of integers.

I want to offer alternate views where the integers are divided by a number to create an average. Column 1 may be divided by x and column 2 by y, so different divisions. This could be toggled by clicking on a button.

I do not want to re-load the table due to performance issues but change the values in the cells only.

I've read the API may be able to be used here but I do not fully understand it yet.

I know how to create the button, just not the DataTables part.
Can anybody explain how this would be done please (i assume in JavaScript)?

Thanks!

kthorngren

I would consider using columns.render. Here is an example:
http://live.datatables.net/kizisema/1/edit

rows().invalidate() is used to invalidate all the data so that Datatables runs the columns.render function when using draw(). Otherwise, for efficiency, the render function won't run since there are no changes. Also the draw() uses the parameter false which stays on the same page. Using this method allows for searching and sorting by the calculated value.

Kevin

AnubisJP

Hey Kevin - thanks for the informative response!

I've been trying it out but cannot seem to apply it into my code. My table is loading as expected and my "createdRow" feature is working correctly, but sadly not the columnDefs/divide feature.

One noticeable difference is you defined your data within the code whereas mine is parsed from a db into html then referenced via the class. Should this make a difference?

Any help appreciated and thanks for your time so far! code below.

HTML snippet of the checkbox

  <div class="container" style="margin-top: 20px">
    <input type="checkbox" id="divide"/>Divide by 2

JavaScript

$(document).ready(function() {
        var fpl_player_scores_table = $('.fpl_player_scores_class').DataTable( {

            // starting order of table ordered on Total
            "order": [[ 8, "desc" ]],

            // test division
            "columnDefs": [
                {
                    targets: 4,
                    render: function (data, type, row) {
                      if ( $('#divide').prop('checked') ) {
                        return data / 2;
                      }
                    return data;
                    }
                }
            ],

            // td colour changes
            "createdRow": function( row, data, dataIndex ) {
                if ( data[3]/9 >= 6 ) {        
                    $(row).find('td:eq(3)').addClass('td_green');
                } else if ( data[3]/9 >= 5 ) {
                    $(row).find('td:eq(3)').addClass('td_lgreen');
                } else if ( data[3]/9 >= 4 ) {
                    $(row).find('td:eq(3)').addClass('td_yellow');
                } else if ( data[3]/9 >= 3 ) {
                    $(row).find('td:eq(3)').addClass('td_orange');
                } else {
                    $(row).find('td:eq(3)').addClass('td_red');
                }
            }
        });

     $('#divide').on('change', function () {
        fpl_player_scores_table.rows().invalidate();
        fpl_player_scores_table.draw(false);
        });
    } );

kthorngren

Looks like you need to pass the data parameter for rows().invalidate(). Like this:
http://live.datatables.net/kizisema/3/edit

Kevin

AnubisJP

That did the trick! Thanks so much, Kevin. Great info.