polymer-datatables-table.html

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="polymer-datatables-table" attributes="data orderBy columns perPage resultTotal perPageCount pageTotal tableApi currentPage options filters">
<template>
	<style>
		.dataTables_filter,
		.dataTables_length,
		.dataTables_paginate {
			display: none;
		}
	</style>
	<table id="table"></table>
</template>
<script src="../lodash/lodash.js"></script>
<script src="../DataTables/media/js/jquery.js"></script>
<script src="../DataTables/media/js/jquery.dataTables.min.js"></script>
<script>
Polymer({
	publish: {
		table: null,
		tableApi: null,
		data: [],
		perPage: 10,
		orderBy: [],
		currentPage: 1,
		resultTotal: 0,
		options: {},
		filters: {},
		isLoaded: false, // workaround to fire DT
	},
	setTableData: function() {
		var poly = this;
		poly.job('set-table-data',function(){
			poly.isLoaded = true;
			poly.createTable(poly.data);
			poly.fire('done');
		}, 100);
	},
	createTable: function(data) {
		var poly = this;
		var t = $(poly.$.table);
		var order = [[0,"desc"]];
		var search = null;
		var filter = null;

		// Set order
		if( poly.orderBy.length ) {
			_.each(poly.columns,function(col,key) {
				if( col.data == poly.orderBy[0] ) {
					order = [[ key, poly.orderBy[1] ]];
				}
			});
		}
		var state = {};
		if( poly.tableApi ) {
			// Use existing order
			order = poly.tableApi.order();
			// Use existing search
			search = poly.tableApi.search();
			// Destroy old table
			poly.tableApi.destroy();
		}

		// Create DT
		poly.table = t.dataTable(_.extend({
			data: data || [],
			columns: poly.columns,
			serverSide: poly.serverSide,
			info: false,
			order: order,
			pageLength: poly.perPage,
			autoWidth: false,
		}, poly.options));

		// Store DT API
		poly.tableApi = t.DataTable();

		// Update Table Header
		t.find('th').each(function() {
			var self = $(this);
			self.html( '<span class="tableHead">'+self.html()+'</span>' );
		});
		// Update Search
		if( search ) poly.tableApi.search(search);

		// Set Misc Variables
		poly.resultTotal = poly.data.length;
		poly.pageTotal = Math.ceil( poly.data.length / poly.perPage ) || 1;
	},
	ready: function() {
		var poly = this;
		poly.async(function() {
			// DT throws errors instead of alerting
			$.fn.dataTableExt.sErrMode = 'throw';

			// Create Table
			var t = $(poly.$.table);
			poly.setTableData();

			// Create Filters
			t.on('draw.dt', function() {
				poly.job('tableFilter',function() {
					if( poly.isLoaded) {
						poly.filters = {};
						poly.tableApi.columns().every( function () {
							var column = this;
							var key = poly.columns[column.index()].data;
							poly.filters[key] = [];
							column.data().unique().sort().each( function ( d, j ) {
								poly.filters[key].push(d);
							});
						});
						poly.isLoaded = false;
						poly.fire('done');
					}
				}, 100);
			});
			// Setup Search
			t.on('search.dt', function() {
				poly.job('tableSearch',function() {
					var info = poly.tableApi.page.info();
					if( info.pages ) {
						poly.pageTotal = info.pages;
					} else {
						poly.pageTotal = 1;
					}
					this.resultTotal = info.recordsDisplay;
				}, 100);
			});
		});
	},
	columnsChanged: function(oldValue,newValue) {
		if( newValue ) {
			for (var i = newValue.length - 1; i >= 0; i--) {
				newValue[i].title = newValue[i].title || newValue[i].data;
			}
			this.setTableData();
		}
	},
	perPageChanged: function(oldValue,newValue) {
		if( newValue && this.tableApi ) this.tableApi.page.len( newValue ).draw();
	},
	currentPageChanged: function(oldValue,newValue) {
		if( newValue && this.tableApi ) this.tableApi.page(newValue-1).draw( false );
	},
	dataChanged: function(oldValue,newValue) {
		if( newValue ) {
			this.setTableData();
		}
	},
});
</script>
</polymer-element>