DataTable Utilities

Documentation

On this page

• Control Table with Raw Data
• Column Data Manipulation Example 1
• Column Data Manipulation Example 2
• Table Footer With Static Totals
• Table Footer With Dynamic Totals updated when Filtered

Control Table with Raw Data

Column Data Manipulation Example 1

• .wb-col-mailto Wrap email Addresses with a <a href="mailto:...">email@example.net</a>
• .wb-col-money Format numbers as Money.
• .wb-col-url Stitch 2 columns (column-name, column-name-url) into a single URL / Caption or URL and URL as the caption if (column-name-url) does not exists within the JSON File.

	<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t2"
			data-wb-tables='{ "ajax":"data/datatable-utility.json",
				"columns": [{ "data": "DepartmentEN" },
					{ "data": "ContactEmail" },
					{ "data": "Custom study titleEN" },
					{ "data": "Registration number" },
					{ "data": "Contract value" }],
				"columnDefs": [{ "className": "text-left", "targets": [0]},
					{ "className": "text-left wb-col-mailto", "targets": [1] },
					{ "className": "text-left wb-col-url", "targets": [2] },
					{ "className": "text-left", "targets": [3] },
					{ "className": "text-right wb-col-money", "targets": [4] }],
				"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>

Column Data Manipulation Example 2

.wb-col-cur-thousand Format numbers with thousands separator with 2 decimals.

	<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t3"
			data-wb-tables='{ "ajax":"data/datatable-utility.json",
				"columns": [{ "data": "DepartmentEN" },
					{ "data": "ContactEmail" },
					{ "data": "Custom study titleEN" },
					{ "data": "Registration number" },
					{ "data": "Contract value" }],
				"columnDefs": [{ "className": "text-left", "targets": [0]},
					{ "className": "text-left", "targets": [1] },
					{ "className": "text-left", "targets": [2] },
					{ "className": "text-left", "targets": [3] },
					{ "className": "text-right wb-col-cur-thousand", "targets": [4] }],
				"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>

Table Footer With Static Totals

.wb-col-sum class on the column to perform column Total

Add a Placeholder <tfoot> at the bottom of the Table.

		<tfoot>
		<tr class="active">
		<th colspan="4">Total</th>
		<td>&nbsp;</td>
		</tr>
		</tfoot>

Code

Pass false via filteredsum to the plugin data-wb-tables-utility="{"filteredsum":false}" as the default is true

	<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t4"
	data-wb-tables-utility="{"filteredsum":false}"
			data-wb-tables='{ "ajax":"data/datatable-utility.json",
				"columns": [{ "data": "DepartmentEN" },
					{ "data": "ContactEmail" },
					{ "data": "Custom study titleEN" },
					{ "data": "Registration number" },
					{ "data": "Contract value" }],
				"columnDefs": [{ "className": "text-left", "targets": [0]},
					{ "className": "text-left wb-col-mailto", "targets": [1] },
					{ "className": "text-left wb-col-url", "targets": [2] },
					{ "className": "text-left", "targets": [3] },
					{ "className": "text-right wb-col-sum wb-col-money", "targets": [4] }],
				"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>

Table Footer With Dynamic Totals updated when Filtered

.wb-col-sum class on the column to perform column Total

Add a Placeholder <tfoot> at the bottom of the Table.

		<tfoot>
			<tr class="active">
				<th colspan="4">Total</th>
				<td>&nbsp;</td>
			</tr>
		</tfoot>

Code

	<table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t5"
			data-wb-tables='{ "ajax":"data/datatable-utility.json",
				"columns": [{ "data": "DepartmentEN" },
					{ "data": "ContactEmail" },
					{ "data": "Custom study titleEN" },
					{ "data": "Registration number" },
					{ "data": "Contract value" }],
				"columnDefs": [{ "className": "text-left", "targets": [0]},
					{ "className": "text-left wb-col-mailto", "targets": [1] },
					{ "className": "text-left wb-col-url", "targets": [2] },
					{ "className": "text-left", "targets": [3] },
					{ "className": "text-right wb-col-sum wb-col-money", "targets": [4] }],
				"lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>