footercallback does not calculates the column value

vaishnavkoka

It works fine on live.datatables but it does not workout in the development environment (too many fields are used), though i used numeral.js script
reference:

here is my code:

       "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\MB,KB,GB,TB,]/g, '')*1 :
                    typeof i === 'number' ?
                    numeral(i).value() : i;
            };
 
            // Total over all pages
            total = api
                .column( 3 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 3, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            total = numeral(total).format('0.0a');
            pageTotal = numeral(pageTotal).format('0.0a');
          $( api.column( 3 ).footer() ).html(
             '--'+pageTotal +' ( --'+ total +' total)'
            );
        }

Please let me know where did i go wrong?

Thanks
Koka

colin

Hi @vaishnavkoka ,

We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Seems like your intVal function is not doing what you want. The numeral().value() needs the MB, etc that you are removing. Looks like we had a similar discussion about numeral.js previously Take a look at the code in this thread:
https://datatables.net/forums/discussion/comment/134713/#Comment_134713

As Colin said if you are unable to get the totals working then please provide a test case.

Kevin

vaishnavkoka

Hi @kthorngren , @colin ,
here is the link for test case,
to be more precise i am retrieving data from database , when a submit button is clicked, I dont think that could be the reason for not making calculation, because in the link sample i have used the static data.

Thanks
Koka

colin

Hi @vaishnavkoka ,

I may be missing something, but that footer total is working as expected to me. Can you please give instructions on how to reproduce your problem.

Cheers,

Colin

vaishnavkoka

Hi @colin,
This is code for retrieving data from the database-file1

 $start_date = $_POST['start_date'];
    $end_date = $_POST['end_date'];
    $conn = connectToDatabase();
    $tableName = "file_tracking_info";
    $result=pg_query($conn,"SELECT system_name, file_name, file_size, f_source_ip, f_destination_ip, file_status, date FROM $tableName WHERE date BETWEEN '" . $start_date . "' AND  '" . $end_date . "'");
    $sno = 1;
    while($row=pg_fetch_assoc($result)):
        $system_name=$row['system_name'];
        $file_name = $row['file_name'];
        $file_size = $row['file_size'];
        $f_source_ip = $row['f_source_ip'];
        $f_destination_ip = $row['f_destination_ip'];
        $file_status = $row['file_status'];
        $date = $row['date'];
        echo "<tr>";
        echo "<td>$sno</td>";
        echo "<td>$system_name</td>";
        echo "<td>$file_name</td>";
        echo "<td>$file_size</td>";
        echo "<td>$f_source_ip</td>";
        echo "<td>$f_destination_ip</td>";
        echo "<td>$file_status</td>";
        echo "<td>$date</td>";
        echo "</tr>";
          $sno++;
    endwhile;

file2 for display purpose:

<div class="bootstrap-iso">
    <div class="container-fluid">
        <div class="row" style="padding-top:10px;padding-left:20px;padding-bottom:20px;">
            <!-- <form class="form-horizontal" action="http://127.0.0.1/deg_login1.2/touch_files_sample/statistics_ajax/more_feature_col_pdf_add.php" method="post"> -->
            <div class="col-xs-4 row">
                <label class="control-label requiredField col-xs-3" style="padding:0px;" for="date">Start Date<span class="asteriskField">*</span></label>
            
                <div class="input-group col-xs-8">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input class="form-control date" id="start_date" placeholder="YYYY/MM/DD" type="text" readonly="readonly" data-date-end-date="0d"/>
                    <!-- if readonly is mentioned then user wont be able to enter dates manually , it is optional to mention  readonly-->
                </div>
            </div>
            <div class="col-xs-4 row">
                <label class="control-label requiredField col-xs-3" style="padding:0px;" for="date">End Date<span class="asteriskField">*</span></label> 
                <div class="input-group col-xs-8">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input class="form-control date" id="end_date" placeholder="YYYY/MM/DD" type="text" readonly="readonly" data-date-end-date="0d"/>
                </div>
            </div>   
            <div class="col-xs-2">
                <button class="btn btn-primary" onclick="renderDetails()" >Submit</button>
            </div>
        <!-- </form> -->
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
var table=$('#statistics').dataTable( {
 "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();

            // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
          console.log(i, numeral(i).value());
            return typeof i === 'string' ?
                    numeral(i).value() : i;
        };

        // Total over all pages
        total = api
            .column( 3 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 3, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        total = numeral(total).format('0.0a');
        pageTotal = numeral(pageTotal).format('0.0a');
        // Update footer
        $( api.column( 3 ).footer() ).html(
            '--'+pageTotal +' ( --'+ total +' total)'
        );
    }
    } );
 } );
</script>

    <div id="customers">
    <div class="table-responsive">
    <table id="statistics" class="table table-bordered table-striped" width="100%" role="grid">
        <thead>
            <tr>
                <th>SNO</th>
                <th>SYSTEM NAME</th>
                <th>FILENAME</th>
                <th>FILESIZE</th>
                <th>source ip</th>
                <th>destination ip</th>
                <th>file status</th>
                <th>date</th>
            </tr>
        </thead>
        <tbody class="selected-date-stats">
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3" style="text-align:right">total</th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
    </table>
    </div>
    </div>

<script>
    $(document).ready(function(){
        var date_input=$(".date"); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
           date_input.datepicker({
            format: 'dd/mm/yyyy',//DD/MM/YYYY this represents day-month in character ex:friday/january
            container: container,
            // showButtonPanel: true,
            // changeMonth: true,
            // changeYear: true,
            todayHighlight: true,
            autoclose: true,
            minDate: new Date(2017, 10 - 1, 10),
            maxDate: 'now'

        })
    });
</script>

Please let me know if you need further clarification.
Thanks
Koka

tangerine

How can the problem be reproduced using your test case (which is working ok for me)?

vaishnavkoka

Hi @tangerine ,
To reproduce my problem you need to use two files, as i mentioned above. that's the only way the problem can be reproduced.

Thanks
Koka

kthorngren

Looking at your code isn't going to help much. We would need to see the actual data that's causing the problem. My suggestion is to start debugging your fotterCallback function. You have a console.log statement in this section of code:

    var intVal = function ( i ) {
      console.log(i, numeral(i).value());
        return typeof i === 'string' ?
                numeral(i).value() : i;
    };

What is the output?

Kevin

vaishnavkoka

Hi @kthorngren ,
I get the values as undefined, here is the link of screenshot

Thanks
Koka

colin

Again, as with the other thread, screenshots aren't much help. We're happy to take a look, but as per the forum rules, please link to a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here. We're all very busy, and many people comment on this forum while doing other jobs, so a test case that replicates the issue will ensure you'll get a quick and accurate response.

Cheers,

Colin

vaishnavkoka

Hi Colin,

If that is the case, should i share the files which would replicate the problem i am facing?
please do let me know are you comfortable with postgresql database ?

Thanks
koka

kthorngren

I get the values as undefined,

Looks like you were typing that into the console?

I meant for you to look at the output of the console.log statement you have in the script when it runs. Since you can't provide us with a running page showing the issue you will need to step through your footCallback function to see what is happening. You can do this by putting console.log statements at various points to see what values are in the function.

Kevin

colin

Hi @vaishnavkoka ,

The aim of the test case is to be the minimal code that demonstrates the problem. The backend database here is irrelvant, you can just have a simple data object which you assign in data - as long as it shows the footerCallback issue.

Cheers,

Colin

vaishnavkoka

Hi @colin ,

If i provide "data" its working fine , here is sample , but what could be the reason for not working the other way out ?

Thanks
Koka

colin

It probably means the data coming back from the server isn't in the expected format. You can still just grab that data that comes back from the server and cut&paste it into a test case and see if it works there - the key is to isolate as many part as you can.

C

vaishnavkoka

Hi @colin ,

Its in the format as i expected, but still things did not work out. where did i need to make changes?

Thanks
Koka

colin

I'm not clear how the server is creating the page - you're not loading by Ajax, so I assume it's creating the table rows somehow. Screenshots really don't help, a test case would move this along much faster.

kthorngren

Took your screenshot and the last footerCallaback code you posted above and put into this test case:
http://live.datatables.net/varinivu/1/edit

It works fine.

I just noticed something in your first screenshot. It has Showing 0 to 0 of 0 entries. Sounds like you are initializing Datatables with a blank table then adding the data directly into the DOM. Datatables doesn't know about the updated data because you aren't using Datatables API's to add the data. Datatables contains it's own data cache which is used for Datatables functions like searching and API's. You will probably notice that searching and sorting doesn't seem to do anything with your table.

You have two choices:

1. Use Datatables APIs to add the data like rows.add()
2. Use rows().invalidate() after you add the data to have Datatables update its data cache with the new table data

Option 2 will only require adding the one line. Option 1 may or may not work depending on the format of the data.

Kevin

vaishnavkoka

@kthorngren ,

I tried this way but it did not work out for me, i may be wrong. can you please provide a solution to this issue.

Link

Thanks
Koka

kthorngren

In the console I see this error

Uncaught ReferenceError: table is not defined

You are trying to access the table variable outside the scope of the $(document).ready( function () { ... }); where it is created. Move that code inside the document ready.

Kevin