DataTable manipulation

njjosh

I have already a datatable design in my project, I have also a script where I can sum all the recorded amount's value, so what I did is I copied the javascript from this site to improve the performance of my datatable just like the datatable of this page, where it can calculate all the values.

I came here to ask for a help, I want to perform my script just like the javascript written on this page.
here's my javascript:

<script type="text/javascript"> var table = document.getElementById("pTable"), sumVal=0; for(var i=1;i<table.rows.length;i++){ sumVal=sumVal+ parseFloat(table.rows[i].cells[4].innerHTML); } console.log(sumVal); document.getElementById("sum_f").innerHTML="Total Expenses: " + sumVal; </script>

I want to perform my script like the performance of this script: (I just Copied it from this site)

<script type="text/javascript"> $(document).ready(function() { $('#example').DataTable( { "footerCallback": function (row, data, start, end, display) { var api = this.api(), data; // remove the formatting to get integer data for summation var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; }; // total over all pages total = api .column (4) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0); // total over this page pageTotal = api .column (4, {page: 'current'}) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0); // update footer $( api.column(4).footer() ).html( '$'+pageTotal +'( $' + total +' total)' ); } }); }); </script>

I hope someone will help me,

kthorngren

The best way for us to help you is if you provide an example of what you are trying to do. This way we can see the problem. Please provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

njjosh

I want my datatable to automatically add all recorded values, and I already did that using the first code stated above, but the problem is, when I search for a specific months, for example I search for the month of march, I want my datatable to only add all values recorded in the month of march.

kthorngren

You can change this example to sum over the search results:
https://datatables.net/examples/advanced_init/footer_callback.html

In that example you can change this section of code to perform the sum over the search results:

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

Change the selector-modifier from { page: 'current'} to {search:'applied'}, for example:

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

If you still need help we will need an example with your data so we can see what you are trying to do.

Kevin

njjosh

this is my test case, I'm not sure if you can see it, but please try

http://live.datatables.net/jihupaqa/1/

njjosh

as you can see, the total expenses displays Nan, I dont know why, but in my project it display the exact total value, but when I search for specific months, the total expenses never change.

and I already used the footerCallback but nothing happens

kthorngren

Your example didn't have the footCallback. I'm not sure if this is what you want but maybe you can re-work it for your needs:
http://live.datatables.net/datuxugu/1/edit

It shows the total based on the search plus the total for the whole table. If you search for -3 for example it will update the total based on what is currently displayed.

The first code you posted above and in the example is not using Datatables functionality to sum the column. Haven't looked at it to see why it results in NaN and why there is $4,525 to the right of the table.

Kevin

njjosh

never mind the $4,525, I just forgot to delete that, hahayytss why is it when I applied your code in my datatable still nothing happens, however i'm still grateful for your response sir, I have just to figure out what is wrong with my datatable. THANK YOU ONCE AGAIN