jQuery DataTable Plugin

A lightweight, flexible and extensible jQuery plugin for rendering interactive data tables. It supports pagination, sorting, filtering, and layout customization — using either AJAX data sources or local inline data. Renderer functions allow full control over the table’s look and behavior.

Developed by Daniel Dahme / BASE3 (https://base3.de), with connection to the photography project Contourz Photography.

---

Preview

---

✨ Features

• Lightweight and dependency-free (except jQuery)
• Pagination, sorting, filtering
• Supports local or remote (AJAX) data sources
• Modular renderer functions for cells, rows, controls
• Fully customizable layout regions (header/footer slots)
• Column visibility toggle, page size selector
• Built-in theming support with clean default styling

---

🚀 Installation

Include jQuery and the plugin files in your HTML page:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Plugin -->
<script src="src/jquery.datatable.js"></script>
<link href="src/jquery.datatable.css" rel="stylesheet">

---

🧠 Basic Usage

<div id="example-table"></div>

<script>
const exampleData = [
	{ id: 1, name: 'Alice', age: 30, city: 'Berlin' },
	{ id: 2, name: 'Bob', age: 35, city: 'Munich' }
];

$('#example-table').jqueryDataTable({
	columns: [
		{ key: 'id', label: 'ID', visible: false },
		{ key: 'name', label: 'Name' },
		{ key: 'age', label: 'Age' },
		{ key: 'city', label: 'City' }
	],
	data: exampleData,
	pageSize: 5,
	layoutTargets: {
		pager: 'footer.right',
		pageSize: 'footer.left',
		info: 'footer.center',
		resetButton: 'header.right',
		columnSelector: 'header.left'
	}
});
</script>

---

🔁 Data Sources

You can provide data either as a local array (data) or as a remote JSON endpoint (dataSource).

Local data:

data: [ { id: 1, ... }, { id: 2, ... }, ... ]

Remote data (AJAX):

dataSource: '/api/data-endpoint'

The endpoint should return the following structure:

{
	"data": [ { "id": 1, "name": "..." }, ... ],
	"page": 1,
	"pageSize": 10,
	"total": 123,
	"totalPages": 13
}

---

⚙️ Options

Option	Type	Description
columns	Array	List of column definitions (key, label), optional visible
data	Array	(Optional) Local data array
dataSource	String	(Optional) URL for remote JSON data
pageSize	Number	Default number of rows per page
pageSizeOptions	Array	Options for page size dropdown
sortColumn	String	Column key to sort initially
sortDirection	String	Initial sort direction 'asc' or 'desc'
layoutTargets	Object	Maps layout slots to controls (see Layout section)
renderers	Object	Custom renderer functions for advanced layouting
onRowClick	Function	Optional callback when a row is clicked

---

🧩 Custom Renderer Example

renderers: {
	row: (rowData, mode) => $('<tr>'),
	cell: (row, col, val, mode) => $('<td>').addClass(`col-${col.key}`),
	valueCell: (row, col, val) => $('<span>').text(val)
}

Use the mode argument ('header', 'filter', 'value') to handle different rendering contexts.

---

🎛 Layout Targets

You can assign controls to layout regions using layoutTargets. Available targets include:

• header.left, header.center, header.right
• footer.left, footer.center, footer.right

Controls include: 'pager', 'pageSize', 'info', 'columnSelector', 'resetButton'

Example:

layoutTargets: {
	pager: 'footer.right',
	pageSize: 'footer.left',
	info: 'footer.center',
	resetButton: 'header.right',
	columnSelector: 'header.left'
}

---

🧑‍💻 Author

This plugin was developed by Daniel Dahme / BASE3 (https://base3.de). It is part of the ecosystem around Contourz Photography, a ballet-focused visual project, and adheres to modern front-end best practices.

---

📄 License

This plugin is licensed under the LGPL (Lesser General Public License).