<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../../webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../../datatables-ajax.html">
	<link rel="import" href="../json-stringify.html">
	<link rel="import" href="../project-docs.html">
	<link rel="import" href="../../sortable-table.html">
	<link rel="import" href="column-filters.html">
	<style shim-shadowdom>
		.paramType { color: #526E9C }
		sortable-table.datatables::shadow td.column-first_name,
		sortable-table.datatables::shadow td.column-last_name,
		sortable-table.datatables::shadow td.column-position,
		sortable-table.datatables::shadow td.column-office,
		sortable-table.datatables::shadow td.column-start_date,
		sortable-table.datatables::shadow td.column-salary {
			padding-right: 5px;
			width: 250px;
			vertical-align: middle;
		}
		sortable-table.datatables::shadow td.column-start_date {
			text-align: center;
		}
		sortable-table.datatables::shadow td.column-salary {
			text-align: right;
		}
	</style>
</head>
<body unresolved is="project-docs">

	<h1>DataTables AJAX</h1>

	This is a REST API using JSON to pass paged data from the server to the client.<br>

	<p>

	The <code style="font-weight:bold">datatables-ajax</code> component is a client-side binding to a server-side XHR datasource,
	supporting paging, sorting, <span style="text-decoration: line-through;" title="Not yet supported by this web component">and filtering.</span>

	<p>

	The API was designed for the popular <a href="https://github.com/DataTables/DataTables" target="_blank" alt="DataTables on GitHub">
	DataTables</a> table plug-in for jQuery, and full documentation can be found on the DataTables.net web site:<br>
	<a href="http://datatables.net/manual/server-side" target="_blank" alt="API documentation">http://datatables.net/manual/server-side</a>

	<p>

	<pre>
	&lt;sortable-table pageSize="10"&gt;
		&lt;datatables-ajax role="datasource" url="<a href="../datatables.net/server_processing.php?draw=2&start=0&length=9999999&columns[0][data]=first_name&columns[0][name]=first_name&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=last_name&columns[1][name]=last_name&columns[1][searchable]=true&columns[1][orderable]=true&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=position&columns[2][name]=position&columns[2][searchable]=true&columns[2][orderable]=true&columns[2][search][value]=&columns[2][search][regex]=false&columns[3][data]=office&columns[3][name]=office&columns[3][searchable]=true&columns[3][orderable]=true&columns[3][search][value]=&columns[3][search][regex]=false&columns[4][data]=start_date&columns[4][name]=start_date&columns[4][searchable]=true&columns[4][orderable]=true&columns[4][search][value]=&columns[4][search][regex]=false&columns[5][data]=salary&columns[5][name]=salary&columns[5][searchable]=true&columns[5][orderable]=true&columns[5][search][value]=&columns[5][search][regex]=false" target="_blank" alt="api">datatables.net/server_processing.php</a>"&gt;&lt;/datatables-ajax&gt;
	&lt;/sortable-table&gt;
	</pre>

	<p>

	<em>The server is hosted in the Netherlands, so users outside of Europe might notice extra latency loading data</em><br>

	<template is="auto-binding">
		<sortable-table
			class="datatables default"
			footerTemplate="defaultPager"
			filterTemplate="fullFilters"
			pageSize="10"
			loading="{{loading}}"
		>
			<sortable-column name="first_name">First</sortable-column>
			<sortable-column name="last_name">Last</sortable-column>
			<sortable-column name="position">Position</sortable-column>
			<sortable-column name="office">Office</sortable-column>
			<sortable-column name="start_date" formula="function(v){ return (new Date(v * 1000)).toString().substring(4,15); }">Start Date</sortable-column>
			<sortable-column name="salary" formula="function(v){ return '$' + v; }">Salary</sortable-column>

			<datatables-ajax role="datasource" url="../datatables.net/server_processing.php"></datatables-ajax>
		</sortable-table>

		<p>

		Data is loading = {{loading}}
	</template>

	<p>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<h2>Basic Use</h2>

	<pre>
	<strong>&lt;datatables-ajax</strong>
		url="<a href="http://files.stevenskelton.ca/sortable-table/examples/datatables.net/server_processing.php" target="_blank" alt="api"
				>http://files.stevenskelton.ca/sortable-table/examples/datatables.net/server_processing.php</a>"
		start=<span class="paramType">[int]</span>
		length=<span class="paramType">[int]</span>
		sortColumn=<span class="paramType">[string]</span>
		sortDescending=<span class="paramType">[boolean]</span>
		columns='[
			{"name":"first_name"},
			{"name":"last_name"},
			{"name":"position"},
			{"name":"office"},
			{"name":"start_date"},
			{"name":"salary"}
		]'
	<strong>&gt;&lt;/datatables-ajax&gt;</strong>
	</pre>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<p>

	<h2>Demo</h2>

	<p>

	<template is="auto-binding">
		<table>
			<tr>
				<td>Start</td>
				<td><input type="number" min="0" max="57" value="{{start}}" style="text-align:right"></td>
				<td><input type="range" min="0" max="57" value="{{start}}"></td>
				<td>Paging first record indicator. This is the start point in the current data set (0 index based - i.e. 0 is the first record).</td>
			</tr>
			<tr>
				<td>Length</td>
				<td><input type="number" min="-1" max="57" value="{{length}}" style="text-align:right"></td>
				<td><input type="range" min="-1" max="57" value="{{length}}"></td>
				<td>Number of records that the table can display in the current draw. It is expected that the number of records returned will be equal to this number, unless the server has fewer records to return. Note that this can be -1 to indicate that all records should be returned (although that negates any benefits of server-side processing!)</td>
			</tr>
			<tr>
				<td style="white-space: nowrap;">Sort Column</td>
				<td>
					<select value="{{sortColumn}}">
						<option value="">-</option>
						<option value="first_name">First Name</option>
						<option value="last_name">Last Name</option>
						<option value="position">Position</option>
						<option value="office">Office</option>
						<option value="start_date">Start Date</option>
						<option value="salary">Salary</option>
					</select>
				</td>
				<td><input type="checkbox" checked="{{sortDescending}}">Descending</td>
				<td>Column by which to sort the records. <strong>This API only supports 1 "Contains" filter per column.</strong></td>
			</tr>
			<tr>
				<td style="white-space: nowrap;vertical-align:top" rowspan="2">Filter Columns</td>
				<td colspan="2"><button onclick="document.getElementById('cf').newFilter()">New Filter</button></td>
				<td>Columns to filter by.</td>
			</tr>
			<tr>
				<td colspan="3"><column-filters id="cf" filters="{{filters}}" filterOps="{{filterOps}}"
				columns='[{"name":"first_name","text":"First Name"},
				{"name":"last_name","text":"Last Name"},
				{"name":"position","text":"Position"},
				{"name":"office","text":"Office"},
				{"name":"start_date","text":"Start Date"},
				{"name":"salary","text":"Salary"}]'></column-filters></td>
			</tr>
		</table>

		<datatables-ajax
			url="../datatables.net/server_processing.php"
			data="{{data}}"
			dataSize="{{dataSize}}"
			loading="{{loading}}"
			start="{{start}}"
			length="{{length}}"
			sortColumn="{{sortColumn}}"
			sortDescending="{{sortDescending}}"
			filters="{{filters}}"
			filterOps="{{filterOps}}"
			columns='[
				{"name":"first_name"},
				{"name":"last_name"},
				{"name":"position"},
				{"name":"office"},
				{"name":"start_date"},
				{"name":"salary"}
			]'
		></datatables-ajax>

		<p>

		<strong>
			<template if="{{!loading}}">Waiting for Query<br></template>
			<template if="{{loading}}">Loading<br></template>
			{{dataSize}} Total Records<br>
			{{data.length}} Records Returned<br>
		</strong>

		<json-stringify
			data="{{data}}"
			style="overflow-y:auto;display:block;border:1px solid #333;"
		></json-stringify>

		<br>

		<em>Column Filters</em>
		<json-stringify
			data="{{filters}}"
			style="overflow-y:auto;display:block;border:1px solid #333;"
		></json-stringify>
	</template>
</body>
</html>