It seems to be unpossible to load the grid by ajax

[keesschepers]

As far as I investigated the code and tested it myself it seems to be unpossible to make datatables load the data thru AJAX by specifying the option "sAjaxSource".

I think that should be default behavior and with the datatable (or the abstract) it should be possible to render either the table HTML and the JSON response which datatable JS library needs.

Therefore it might be nice if you could create a grid like this:

$dataTable = $this->getServiceLocator()->get('Pike\DataTables')->create('my_own_grid');

Then 'my_own_grid' should be a service, which you can customize or take the abstract service from Pike self:

'service_manager' => array(
    'my_own_grid' => function($sm) {
        $dataTable = new \Pike\DataTable($adapter, $dataSource, $etc);
        $adapter->setTemplateFile('customer/template');
    }
)

Or you create it with the abstract factory:

'service_manager' => array(
    'my_own_grid' => '\Pike\DataTable\ServiceFactory',
),
'pike' => array(
    'datatable' => array(
        'my_own_grid' => array(
            'template' => 'custom/template'
        )
    )
)

I am using ZfcTwig and now Pike\DataTable isn't able to work 👎

Any ideas on this @nicovogelaar?

[keesschepers]

Forget the first part. I managed to get it working but I still cannot use the render() method because it will not render my twig layout, but that's solvable.

Got it fixed by:

public function indexAction()
{
    if ($this->getRequest()->isXmlHttpRequest()) {
        $em = $this->getServiceLocator()->get('doctrine.entitymanager.orm_default');

        $adapter = new \Pike\DataTable\Adapter\DataTables();
        $adapter->setOptions(array(
            'sAjaxSource' => '/admin/orders',
        ));
        $adapter->setParameters($this->getRequest()->getQuery()->toArray());

        $dataSource = new \Pike\DataTable\DataSource\Doctrine($em->createQuery('SELECT o.username, o.email, o.fullname, o.loghash, o.userid FROM \PsUser\Entity\User o'));
        $dataTables = new \Pike\DataTable($adapter, $dataSource, $this->getServiceLocator());

        return $dataTables->getResponse();
    }

    return new ViewModel();
}

And my view file:

{% extends "ps-admin-theme/layout.twig" %}

{% block script %}
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.custom.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.uniform.js"></script>
    <script src="js/select2.min.js"></script>
    <script src="js/jquery.dataTables.js"></script>
    <script src="js/unicorn.js"></script>
    <script src="js/unicorn.tables.js"></script>
{% endblock script %}

{% block style %}
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <link rel="stylesheet" href="css/uniform.css" />
    <link rel="stylesheet" href="css/select2.css" />
    <link rel="stylesheet" href="css/unicorn.main.css" />
    <link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
{% endblock style %}

{% block body %}
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="widget-box">
                <div class="widget-title">
                    <h5>Orders</h5>
                </div>
                <div class="widget-content nopadding">
                    <table class="table table-bordered table-striped table-hover data-table" data-url="/admin/orders">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="title-table-checkbox" name="title-table-checkbox" /></th>
                                <th>Column name</th>
                                <th>Column name</th>
                                <th>Column name</th>
                                <th>Column name</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock body %}