README

处理 Datatables.net 的 AJAX 请求。

安装

composer require intracto/datatables-backend

or

"intracto/datatables-backend" : "dev-master"

列

容器类，用于保存 Column 对象。用于获取排序的字段。

列

存储关于列的数据，可用于前端渲染 <th> 并让 DataTables 知道哪些字段是可排序和可搜索的（通过 JavaScript）。

数据提供者

获取要在数据表中显示的数据。需要 Parameters、DataTablesRepository、ColumnTransformer。

参数

容器类，用于保存来自 datatables AJAX 请求的数据。

DataTablesRepositoryInterface

定义了获取数据所需的查询函数。

DataTablesRepositoryTrait

DataTablesRepositoryInterface 的实现，包含通用查询。目前仅适用于 Doctrine ODM。

ColumnTransformerInterface

将从 Repository 获取的数据转换成 datatables 需要的格式。字段的顺序在这里很重要。

示例

列

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),
            )
        );
    }
}

转换器

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;
    }
}

存储库

class AddressRepository extends DocumentRepository implements DataTablesRepositoryInterface
{
    use DataTablesRepositoryTrait;
}

控制器

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);
}

前端

外部 JS

在加载官方 datatables.js 插件后包含 ajax-datatables.js

Twig HTML

确保表格有 "ajaxdatatable" 类。遍历表格头中的所有列

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

需要默认排序吗？将类 default_sort 和 asc|desc 添加到正确的 <th> 中

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

Twig JS

在需要加载 AJAX 数据表的 twig 页面上放置以下脚本块

过滤器是可选的，这里可以传递可搜索/可过滤的字段

<script>
    $(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();
        });
    });
</script>