Datatable totals row from server

Webix JS
#1

I have data coming from the server in pages of 10 records each (limit clause). However I would like to have a one-row footer that shows totals for the entire dataset (not just the limit 10).

I have handled it server-side and can serve up a JSON response with a “footerrow” object (actually part of the same response that brings back the 10 rows).

How best to map this JSON response into the footer for all columns? (not just 1-2 columns - I could have 20+). I did not see an example of this in the docs.

I could name the JSON keys in the footerrow object to be the same as the column ids if that helps.

Thanks for any help

#2

Hello,

This is a rare use case, but you can apply the following solution.

As far as I can see, you load data dynamically and get an object with data, pos and total_count properties from the server. Then you may append totals with data for your footer row to the serverside response:

{ data:data, pos:0, total_count:999, totals:{
   size:123546987521, id:456378
}}

You can load data via a proxy and save these totals among the properties of Datatable datastore:

datatable.data.totals = data.totals;

The final stage is to show the total data. You need to create a custom footer content elements that will display totals for the needed columns:

 webix.ui.datafilter.totalColumn = webix.extend({
   refresh:function(master, node, value){
    //we save them here in the previous step 
     var totals = master.data.totals;
     if(totals)
       node.firstChild.innerHTML = totals[value.columnId] || "";
   }
}, webix.ui.datafilter.summColumn);

Check the related snippet, please: http://webix.com/snippet/8ad99640

#3

Helga, I want to thank you for this thoughtful and very helpful response! Much appreciated