dutchbridge/datatablebundle

Symfony2 Datatable For Doctrine Entities

DatatableBundle

Symfony2 Datatable For Doctrine Entities., _(*1)

Status: not yet ready, hard-development, _(*2)

I will update the documentation ASAP

Before installing DatatableBundle you need to have a working installation of Symfony2., _(*3)

Screenshot

Installation

1. Download DatatableBundle using composer, _(*4)

   Add DatatableBundle in your composer.json:, _(*5)

   {
       "require": {
           "dutchbridge/datatablebundle": "dev-master"
       }
   }
   

   Tell composer to download the bundle by running the command:, _(*6)

   bash $ php composer.phar update, _(*7)

2. Enable the bundle, _(*8)

   Enable the bundle in the kernel:, _(*9)

   ``` php <?php // app/AppKernel.php, <sub>(*10)</sub>

   public function registerBundles() { $bundles = array( // ... new DutchBridge\DatatableBundle\DutchBridgeDatatableBundle() ); } ```, <sub>(*11)</sub>

3. Bootstrap 2.3 installation, <sub>(*12)</sub>

   The DatatableBundle no contains the assets files from Twitter Bootstrap. You can e.g. download a ZIP archive with the files from the Bootstrap repository on Github., <sub>(*13)</sub>

   • Copy into the DatatableBundle\Resources\public\css directory the bootstrap css file.
   • Copy into the DatatableBundle\Resources\public\img directory the bootstrap icons files.
   • Copy into the DatatableBundle\Resources\public\js directory the bootstrap js file.

Example

1. Create your layout.html.twig, <sub>(*14)</sub>

   ``` html {% extends '::base.html.twig' %}, <sub>(*15)</sub>

   {% block title %}UserBundle{% endblock %}, <sub>(*16)</sub>

   {% block stylesheets %}, <sub>(*17)</sub>

   <link href="{{ asset('bundles/dutchbridgedatatable/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
   <link href="{{ asset('bundles/dutchbridgedatatable/css/dataTables_bootstrap.css') }}" rel="stylesheet" type="text/css" />

   {% endblock %}, <sub>(*18)</sub>

   {% block body%}, <sub>(*19)</sub>

   {% block scripts %}
       <script src="{{ asset('bundles/dutchbridgedatatable/js/jquery-2.0.2.min.js') }}" type="text/javascript"></script>
       <script src="{{ asset('bundles/dutchbridgedatatable/js/bootstrap.min.js') }}" type="text/javascript"></script>
       <script src="{{ asset('bundles/dutchbridgedatatable/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
       <script src="{{ asset('bundles/dutchbridgedatatable/js/dataTables_bootstrap.js') }}" type="text/javascript"></script>
   {% endblock %}
   
   <div class="container">
       {% block content %}
       {% endblock %}
   </div>

   {% endblock %} ```, <sub>(*20)</sub>

2. Create your Datatable class, <sub>(*21)</sub>

   ``` php <?php, <sub>(*22)</sub>

   namespace DutchBridge\UserBundle\Datatable;, <sub>(*23)</sub>

   use DutchBridge\DatatableBundle\Datatable\AbstractDatatableView; use DutchBridge\DatatableBundle\Datatable\Field; use DutchBridge\DatatableBundle\Datatable\Action;, <sub>(*24)</sub>

   /**, <sub>(*25)</sub>

   • Class UserDatatable

   • @package DutchBridge\UserBundle\Datatable */ class UserDatatable extends AbstractDatatableView { /**, <sub>(*26)</sub>

     • {@inheritdoc} */ public function build() { $this->setTableId('user_datatable'); $this->setSAjaxSource('user_results');, <sub>(*27)</sub>

       $this->setTableHeaders(array( 'Username', 'Email', 'Enabled', '' ));, <sub>(*28)</sub>

       $nameField = new Field('username');, <sub>(*29)</sub>

       $emailField = new Field('email');, <sub>(*30)</sub>

       $enabledField = new Field('enabled'); $enabledField->setBSearchable('false'); $enabledField->setSWidth('90'); $enabledField->setMRender("render_boolean_icons(data, type, full)");, <sub>(*31)</sub>

       $idField = new Field('id'); $idField->setBSearchable('false'); $idField->setBSortable('false'); $idField->setMRender("render_action_icons(data, type, full)"); $idField->setSWidth('92');, <sub>(*32)</sub>

       $this->addField($nameField); $this->addField($emailField); $this->addField($enabledField); $this->addField($idField);, <sub>(*33)</sub>

       $editAction = new Action(); $editAction->setType('route'); $editAction->setClass('btn btn-sm btn-primary'); $editAction->setRoute('user_edit'); $editAction->setIcon('icon-edit'); $editAction->addRouteParameter('userId', array('field' => 'id'));, <sub>(*34)</sub>

       $removeAction = new Action(); $removeAction->setType('route'); $removeAction->setClass('btn btn-sm btn-danger'); $removeAction->setRoute('user_remove'); $removeAction->setIcon('icon-remove'); $removeAction->addRouteParameter('userId', array('field' => 'id')); $removeAction->addRouteParameter('lorem', array('value' => 'ipsum'));, <sub>(*35)</sub>

       $this->addAction($editAction); $this->addAction($removeAction); } } ```, <sub>(*36)</sub>

3. Create your index.html.twig, <sub>(*37)</sub>

   ``` html {% extends 'SgUserBundle::layout.html.twig' %}, <sub>(*38)</sub>

   {% block title %}{{ title }}{% endblock %}, <sub>(*39)</sub>

   {% block content %}, <sub>(*40)</sub>

   <h2>{{ title }}</h2>
   
   {{ datatable_render(datatable) }}

   {% endblock %} ```, <sub>(*41)</sub>

4. Add controller actions, <sub>(*42)</sub>

   ``` php /**, <sub>(*43)</sub>

   • Lists all User entities.
   • @Route("/", name="user")
   • @Method("GET")
   • @Template()

   • @return array */ public function indexAction() { /**, <sub>(*44)</sub>

     • @var \DutchBridge\DatatableBundle\Factory\DatatableFactory $factory */ $factory = $this->get('sg_datatables.factory');

     /**, <sub>(*45)</sub>

     • @var \DutchBridge\DatatableBundle\Datatable\AbstractDatatableView $datatableView */ $datatableView = $factory->getDatatableView('DutchBridge\UserBundle\Datatable\UserDatatable');

     return array( 'title' => 'Enabled Users', 'datatable' => $datatableView, ); }, <sub>(*46)</sub>

   /**, <sub>(*47)</sub>

   • Get all User entities.
   • @Route("/results", name="user_results")

   • @return \Symfony\Component\HttpFoundation\Response */ public function indexResultsAction() { /**, <sub>(*48)</sub>

     • @var \DutchBridge\DatatableBundle\Datatable\DatatableData $datatable */ $datatable = $this->get('sg_datatables')->getDatatable('SgUserBundle:User');

     /**, <sub>(*49)</sub>

     • @var \Doctrine\ORM\QueryBuilder $qb */ $callbackFunction =, <sub>(*50)</sub>

       function($qb) { $andExpr = $qb->expr()->andX(); $andExpr->add($qb->expr()->eq('fos_user.enabled', '1')); $qb->andWhere($andExpr); };, <sub>(*51)</sub>

     $datatable->addWhereBuilderCallback($callbackFunction);, <sub>(*52)</sub>

     return $datatable->getSearchResults(); } ```, <sub>(*53)</sub>

5. Working with Associations, <sub>(*54)</sub>

   We extend the user entity to multiple OneToMany associations (Post and Comment)., <sub>(*55)</sub>

   ``` php <?php, <sub>(*56)</sub>

   namespace DutchBridge\UserBundle\Entity;, <sub>(*57)</sub>

   use Doctrine\Common\Collections\ArrayCollection; use FOS\UserBundle\Model\User as BaseUser; use Doctrine\ORM\Mapping as ORM; use DutchBridge\AppBundle\Entity\Comment; use DutchBridge\AppBundle\Entity\Post;, <sub>(*58)</sub>

   /**, <sub>(*59)</sub>

   • Class User
   • @ORM\Entity
   • @ORM\Table(name="fos_user")

   • @package DutchBridge\UserBundle\Entity */ class User extends BaseUser { /**, <sub>(*60)</sub>

     • @ORM\Id
     • @ORM\Column(type="integer")
     • @ORM\GeneratedValue(strategy="AUTO") */ protected $id;

     /**, <sub>(*61)</sub>

     • @ORM\OneToMany(
     • targetEntity="DutchBridge\AppBundle\Entity\Post",
     • mappedBy="createdBy"
     • ) */ private $posts;

     /**, <sub>(*62)</sub>

     • @ORM\OneToMany(
     • targetEntity="DutchBridge\AppBundle\Entity\Comment",
     • mappedBy="createdBy"
     • ) */ private $comments;

     /**, <sub>(*63)</sub>

     • Ctor. */ public function __construct() { parent::__construct();, <sub>(*64)</sub>

       // your own logic, <sub>(*65)</sub>

       $this->posts = new ArrayCollection(); $this->comments = new ArrayCollection(); }, <sub>(*66)</sub>

     // ..., <sub>(*67)</sub>

   }, <sub>(*68)</sub>

   
   For a comma-separated view of all blog titles we add the following to the UserDatatable class.
   
   ``` php
   $this->setTableHeaders(array(
       'Username',
       'Email',
       'Enabled',
       'Posts',
       ''
   ));
   
   $postsField = new Field('posts');
   $postsField->setRenderArray(true);
   $postsField->setRenderArrayFieldName('title');
   $postsField->setSName('posts.title');
   
   $this->addField($nameField);
   $this->addField($emailField);
   $this->addField($enabledField);
   $this->addField($postsField);
   $this->addField($idField);
   

   The result should looks like that:, <sub>(*69)</sub>