CoffeeScript and JavaScript examples of using WATable with Express.js and Jade, with button to download CSV.

watable-controller.coffee

app.get '/watable', (req, res, next) ->
  res.render 'watable'

app.get '/data.json', (req, res, next) ->
  UserModel.find {}, 'email firstname lastname', (err, users) ->
    return next err if err

    rows = []
    for user in users
      user = user.toObject()
      # add a column with buttons to administer each user
      user.actions = "<a href='/admin/users/#{user._id}/edit' class='btn btn-mini user-edit'><i class='icon-pencil'></i></a> " +
        "<a href='/admin/users/#{user._id}/delete' class='btn btn-mini btn-danger user-delete' onClick='return confirm(\"Are you sure you want to delete this user?\");'><i class='icon-trash'></i></a> "
      rows.push user

    data =
      cols:
        actions:
          index: 1
          type: 'string'
          friendly: 'Actions'
          tooltip: 'You might need<br>permissions to edit<br>or delete an user'
        email:
          index: 2
          type: 'string'
          friendly: 'E-mail'
          unique: true
          tooltip: 'Please do not remove<br>this column if you<br>intend to download<br>a CSV, since it\'s<br>a key column'
        firstname:
          index: 3
          type: 'string'
          friendly: 'First name'
        lastname:
          index: 4
          type: 'string'
          friendly: 'Last name'
      rows: rows

    res.json data

watable-controller.js

app.get('/watable', function(req, res, next) {
  res.render('watable');
});

app.get('/data.json', function(req, res, next) {
  UserModel.find({}, 'email firstname lastname', function(err, users) {
    if (err) return next(err);

    var rows = [];
    for (var i = 0, len = users.length; i < len; i++) {
      user = users[i];
      user = user.toObject();
      user.actions = ("<a href='/admin/users/" + user._id + "/edit' class='btn btn-mini user-edit'><i class='icon-pencil'></i></a> ") +
        ("<a href='/admin/users/" + user._id + "/delete' class='btn btn-mini btn-danger user-delete' onClick='return confirm(\"Are you sure you want to delete this user?\");'><i class='icon-trash'></i></a> ");
      rows.push(user);
    }

    var data = {
      cols: {
        actions: {
          index: 1,
          type: 'string',
          friendly: 'Actions',
          tooltip: 'You might need<br>permissions to edit<br>or delete an user'
        },
        email: {
          index: 2,
          type: 'string',
          friendly: 'E-mail',
          unique: true,
          tooltip: 'Please do not remove<br>this column if you<br>intend to download<br>a CSV, since it\'s<br>a key column'
        },
        firstname: {
          index: 3,
          type: 'string',
          friendly: 'First name'
        },
        lastname: {
          index: 4,
          type: 'string',
          friendly: 'Last name'
        }
      },
      rows: rows
    };

    res.json(data);
  });
});

watable.jade

extends layout
block content
  .row-fluid
    .span12
      h1 Users table
      p
        a#downloadcsv.btn(href='#')
          i.icon-download-alt
          |  Download selected as CSV
      table#users-table.table
      #loading-users-table
        i.icon-spinner.icon-spin
        |  Loading all data, might take some seconds...

append css
  link(href="#{cdn}/css/watable.92e5f039848beddd90de47ddd6accd4a.css", rel='stylesheet')

append js
  script(src="#{cdn}/js/jquery.watable.0438737109da875b9f571caabb359abb.min.js")
  script
    //- Initialize Watable
    var usersWatable = $('#users-table').WATable({
      url: "/data.json",
      preFill: false,
      pageSize: 100,
      pageSizes: [100,200,500,'All'],
      filter: true,
      columnPicker: true,
      tableCreated: function(data) {
        $('#loading-users-table').hide();
      }
    }).data('WATable');

    //- Download selected rows as CSV
    $('#downloadcsv').click(function(e) {
      e.preventDefault();
      var data = usersWatable.getData(true);
      var columns = Object.keys(data.cols).sort()
      var columnsDeleted = []
       // find columns removed by Watable columnPicker
      for (var i = 0, colsDelLenTag = columns.length; i < colsDelLenTag; i++) {
        if (data.cols[columns[i]].hidden === true) {
          columnsDeleted.push(columns[i]);
        }
      }
      //- remove deleted columns from exported CSV
      for (var j = 0, colsDelLen = columnsDeleted.length; j < colsDelLen; j++) {
        var index = columns.indexOf(columnsDeleted[j]);
        columns.splice(index, 1)
      }
      //- remove column with actions buttons from CSV
      columns.splice(columns.indexOf('actions'), 1);
      //- create CSV and download
      var csv = columns.join(';') + '\n';
      for (var k = 0, rowsLen = data.rows.length; k < rowsLen; k++) {
        var user = data.rows[k];
        var row = '';
        user_keys = Object.keys(user).sort();
        for (var l = 0, colsLen = columns.length; l < colsLen; l++) {
          field = user[columns[l]]
          if (field != null) {
            row = row.concat(field);
          }
          if (l+1 < colsLen) {
            row = row.concat(';');
          }
        }
        csv = [csv, row, '\n'].join('');
      }
      location.href='data:text/csv,' + encodeURIComponent(csv)
    });