intracto/datatables-backend

Library to handle AJAX calls for datatables.net

Intracto DataTables library

Handle AJAX requests for Datatables.net., _(*1)

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., _(*2)

Column

Hold data about a column, can be used for the frontend to render <th> and let DataTables known which fields are sortable and searchable (via javascript)., _(*3)

DataProvider

Get the data to show in the datatable. Requires Parameters, DataTablesRepository, ColumnTransformer., _(*4)

Parameters

Container class to hold data from the datatables AJAX request., _(*5)

DataTablesRepositoryInterface

Defines query functions needed to fetch the data., _(*6)

DataTablesRepositoryTrait

An implementation of DataTablesRepositoryInterface with general queries. Only available for Doctrine ODM for now., _(*7)

ColumnTransformerInterface

Transform data fetched from the Repository to format needed for the datatables. The order of the fields is important here., _(*8)

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, _(*9)

Twig html

Make sure the table has the "ajaxdatatable" class Loop all the columns in the table head, _(*10)

<table class="ajaxdatatable">
    <thead>
        <tr>
            {% for column in columns %}
                <th>{{ ("translatable.prefix." ~ column.name)|trans }}</th>
            {% endfor %}
        </tr>
    </thead>
</table>

Default sorting needed? Add the class default_sort and asc|desc to the <th> to the correct column, _(*11)

<th {% if column.name == 'email' %} class="default_sort desc"{% endif %}>
    ...
</th>

Twig JS

On the twig page where the ajax datatable must be loaded, place following script block, _(*12)

The filters are optional, here you can pass searchable/filterable fields, _(*13)