sum footer in backgridjs

Question

I have a backgridjs table below.

var columns = [{
    name: "_id",
    label: "account#",
    editable:"false",
    cell: "string"
  }, {
    name: "class",
    label: "class",
    editable:"false",
    cell: "string"
  },{
    name: "date",
    label: "Date",
    editable:"false",
    cell: "string"
  },{
    name: "id",
    label: "id",
    editable:"false",
    cell: "string"
  },{
    name: "total",
    label: "Total",
    editable:"false",
    cell: Backgrid.NumberCell.extend({
      orderSeparator: ','
    }),
    cell: "number"
  }];

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: "/payroll",
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});

var pageableTerritories = new PageableTerritories();

var CaptionFooter = Backgrid.Footer.extend({
  render: function () {
    this.el.innerHTML = '<tr><td></td><td></td></tr>'
    return this;
  }
});

// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all",
  }].concat(columns),
  collection: pageableTerritories,
  footer: CaptionFooter // <--
});

// Render the grid
var $example1 = $("#example-1-result");
$example1.append(pageableGrid.render().el)

// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection: pageableTerritories
});

// Render the paginator
$example1.after(paginator.render().el);

// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
  collection: pageableTerritories,
  fields: ['_id',"Order Class","techId"],
  placeholder: "search"
});

// Render the filter
$example1.before(filter.render().el);

// Add some space to the filter and move it to the right
$(filter.el).css({float: "right", margin: "20px"});

// Fetch some data
pageableTerritories.fetch({reset: true});

Everything works great and as expected, except I'm having a hard time figuring out how to set a total footer cell for the total column.

If I type the command below in the console I get the footer cell I want with the total.

for (var i = 0,total = 0, len = pageableTerritories.toJSON().length; i < len; ++i) {
  total = total + pageableTerritories.toJSON()[i].total;
  $('tfoot').text(total)
};

But I want the the footer cell to show up when the table is rendered. I have tried the following but total shows $0.

var CaptionFooter = Backgrid.Footer.extend({

  render: function () {
   for (var i = 0,total = 0, len = pageableTerritories.toJSON().length; i < len; ++i) {
      total = total + pageableTerritories.toJSON()[i].total;
      $('tfoot').text(total)
    };
    this.el.innerHTML = '<tr><td></td><td></td></tr>' + total <---- $0 here
    return this;
  }

});

I would greatly appreciate if someone can help me figure this one out. Like always thanks in advance.

Answer 1

This solved my issue with the footer total, however when I paginate footer total doesn't update.

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: "/payroll",
  total: function() {
      return this.reduce(function(memo, value) {
        return memo + value.get("total");
      }, 0);
    },
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});

var CaptionFooter = Backgrid.Footer.extend({
    initialize: function() {
      _.bindAll(this);
      this.collection.bind('sync', this.total);
    },
    total: function(evt) {
      var total = evt.total()
      this.$el.html("<tr><td colspan='7' class='text book bold align right'>Gross Pay: $" + total + "</td></tr>");
    }
  });

Answer 2

Take a look at this simple wrapper around the Backgridjs Footer to provide a Totals Footer.

https://bitbucket.org/base79/backgridjs-total-footer/overview

For your example, update columns to include:

var columns = [{
    ...
    {
        name: 'total',
        label: 'Total',
        ...
        footerCell: TotalFooter.Cell.extend({
            getValue: function () {
                return '$' + this.formatter.fromRaw(this._sumColumn());
            }
    })
}];

Then pageableGrid becomes:

var pageableGrid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all",
  }].concat(columns),
  collection: pageableTerritories,
  footer: TotalFooter.Footer
});