https://github.com/intracto/datatables-backend
https://github.com/intracto/datatables-backend
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/intracto/datatables-backend
- Owner: Intracto
- License: mit
- Created: 2016-08-11T08:10:49.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-16T13:24:19.000Z (over 3 years ago)
- Last Synced: 2025-04-13T02:37:48.183Z (about 1 year ago)
- Language: PHP
- Size: 25.4 KB
- Stars: 4
- Watchers: 29
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Intracto DataTables library
Handle AJAX requests for Datatables.net.
## Install
```
composer require intracto/datatables-backend
or
"intracto/datatables-backend" : "dev-master"
```
### Columns
Container class to hold `Column` objects. This is used to get the field for sorting.
### Column
Hold data about a column, can be used for the frontend to render `` and let DataTables known which fields
are sortable and searchable (via javascript).
### DataProvider
Get the data to show in the datatable. Requires `Parameters`, `DataTablesRepository`, `ColumnTransformer`.
### Parameters
Container class to hold data from the datatables AJAX request.
### DataTablesRepositoryInterface
Defines query functions needed to fetch the data.
### DataTablesRepositoryTrait
An implementation of `DataTablesRepositoryInterface` with general queries. Only available for Doctrine ODM for now.
### ColumnTransformerInterface
Transform data fetched from the `Repository` to format needed for the datatables. The order of the fields is important here.
---
## Example
### Columns
```
class AddressListColumns extends Columns
{
public function __construct()
{
parent::__construct(
array(
// In order of the tables headers
new Column('city', 'city', true, true),
new Column('zip', 'zip', false, false),
new Column('street', 'street', false, false),
new Column('actions', 'actions', false, false),
)
);
}
}
```
### Transformer
```
class AddressListColumnTransformer implements ColumnTransformerInterface
{
/**
* @var EngineInterface
*/
private $renderEngine;
/**
* AddressListColumnTransformer constructor
*
* @param EngineInterface $renderEngine
*/
public function __construct(EngineInterface $renderEngine)
{
$this->renderEngine = $renderEngine;
}
/**
* @param array $data
*
* @return array
*/
public function transform(array $data)
{
$columns = array();
foreach ($data as $address) {
/**
* @var Address $address
*/
$columns[] = array(
$address->getCity()
$address->getZip()
$address->getStreet()
$this->renderEngine->render('Address/_list.actions.html.twig', array('address' => $address)),
);
}
return $columns;
}
}
```
### Repository
```
class AddressRepository extends DocumentRepository implements DataTablesRepositoryInterface
{
use DataTablesRepositoryTrait;
}
```
### Controller
```
public function listAction()
{
$columns = new AddressListColumns();
return array(
'columns' => $columns,
);
}
public function ajaxListAction(Request $request)
{
$parameters = Parameters::fromParameterBag($request->query, new AddressListColumns());
$data = $this->dataTablesDataProvider->getData(
$parameters,
$addressRepository,
$addressListColumnTransformer
);
return new JsonResponse($data);
}
```
---
### Frontend
#### External JS
Include `ajax-datatables.js` after loading the official datatables.js plug-in
#### Twig html
Make sure the table has the "ajaxdatatable" class
Loop all the columns in the table head
```
{% for column in columns %}
{{ ("translatable.prefix." ~ column.name)|trans }}
{% endfor %}
```
Default sorting needed? Add the class `default_sort` and `asc`|`desc` to the `` to the correct column
```
...
```
#### Twig JS
On the twig page where the ajax datatable must be loaded, place following script block
The `filters` are optional, here you can pass searchable/filterable fields
```
$(document).ready(function(){
{# define the ajax call path #}
var ajaxCallPath = "{{ path("path_to_your_ajax_call") }}";
{# define which columns are orderable #}
var sortable = [
{% for column in columns %}
{%- if column.orderable -%}
{{ 'null' }}
{%- else -%}
{{ '{ "orderable": false }'}}
{%- endif -%}
{{ ',' }}
{% endfor %}
];
{# page load filter fields, do not add .val() since we need the reference #}
var filters = {
'name': $("#js-filter-naam"),
'address.city': $("#js-filter-city")
};
{# on page load, init the datatable #}
ajaxDatatable(ajaxCallPath, sortable, filters, stateSaveAffix);
{# on submit, change, whenever you want #}
$(document).on("click", "#js-filter-submit", function(){
{# no need to pass the parameters again #}
ajaxDatatable();
});
});
```