Using ajax with sonata admin list view pagination -

Using ajax with sonata admin list view pagination -

i'm using sonata admin in project. in list view sonata refresh page when clik sec list pagination. that's default behavior of sonata.is there way utilize ajax phone call list view pagination !!!

same question when using sortable list view.

thanks.

this possible, have overwrite of basic functionality of sonata admin bundle.

tested

symfony 2.6.6 sonata admin-bundle dev-master (4f23e1a30e49681bf8ebdbbae549848784be7699)

1. edit bundles services.yml

you have implement own crudcontroller , new list template. tell in services.yml

sonata.admin.youradmin: class: your\bundle\admin\youradmin tags: - { name: sonata.admin, manager_type: orm, group: "groupname", label: "grouplabel" } arguments: - ~ - your\bundle\entity\entityclass - yourbundle:yournewcrud # <- add together crud class here calls: - [ setlabeltranslatorstrategy, ["@sonata.admin.label.strategy.underscore"]] - [ settemplate, [list, yourbundle:youradmin:list.html.twig]] # <- tell sonata want template list

2. add together new twig template

now add together next template bundles resources/views/youradmin/list.html.twig:

{# extends normal base_list.html.twig, when template rendered via ajax-call, extend ajax-list.html.twig, we'll add together later #} {% extends app.request.xmlhttprequest ? 'yourbundle:ajax-list.html.twig' : 'sonataadminbundle:crud:base_list.html.twig' %} {# yourbundle:ajax-list.html.twig path have template, if template within views/admin, set this: yourbundle:admin:ajax-list.html.twig #} {# here copied list_table block original list.html.twig sonata.. added custom js-code below ajax phone call #} {% block list_table %} {# code in block copied sonata.. added js-code below, , added 'actionlist' id here #} <div id="actionlist" class="col-xs-12 col-md-12"> {% if admin.hasroute('batch') %} <form action="{{ admin.generateurl('batch', {'filter': admin.filterparameters}) }}" method="post" > <input type="hidden" name="_sonata_csrf_token" value="{{ csrf_token }}"> {% endif %} {# add together margin if no pager prevent dropdown cropping on window #} <div class="box box-primary" {% if admin.datagrid.pager.lastpage == 1 %}style="margin-bottom: 100px;"{% endif %}> <div class="box-body {% if admin.datagrid.results|length > 0 %}table-responsive no-padding{% endif %}"> {{ sonata_block_render_event('sonata.admin.list.table.top', { 'admin': admin }) }} {% block list_header %}{% endblock %} {% set batchactions = admin.batchactions %} {% if admin.datagrid.results|length > 0 %} <table class="table table-bordered table-striped sonata-ba-list"> {% block table_header %} <thead> <tr class="sonata-ba-list-field-header"> {% field_description in admin.list.elements %} {% if admin.hasroute('batch') , field_description.getoption('code') == '_batch' , batchactions|length > 0 %} <th class="sonata-ba-list-field-header sonata-ba-list-field-header-batch"> <input type="checkbox" id="list_batch_checkbox"> </th> {% elseif field_description.getoption('code') == '_select' %} <th class="sonata-ba-list-field-header sonata-ba-list-field-header-select"></th> {% elseif field_description.name == '_action' , app.request.isxmlhttprequest %} {# action buttons disabled in ajax view! #} {% elseif field_description.getoption('ajax_hidden') == true , app.request.isxmlhttprequest %} {# disable fields 'ajax_hidden' alternative set true #} {% else %} {% set sortable = false %} {% if field_description.options.sortable defined , field_description.options.sortable %} {% set sortable = true %} {% set sort_parameters = admin.modelmanager.sortparameters(field_description, admin.datagrid) %} {% set current = admin.datagrid.values._sort_by == field_description or admin.datagrid.values._sort_by.fieldname == sort_parameters.filter._sort_by %} {% set sort_active_class = current ? 'sonata-ba-list-field-order-active' : '' %} {% set sort_by = current ? admin.datagrid.values._sort_order : field_description.options._sort_order %} {% endif %} {% spaceless %} <th class="sonata-ba-list-field-header-{{ field_description.type}} {% if sortable %} sonata-ba-list-field-header-order-{{ sort_by|lower }} {{ sort_active_class }}{% endif %}"> {% if sortable %}<a href="{{ admin.generateurl('list', sort_parameters) }}">{% endif %} {{ admin.trans(field_description.label, {}, field_description.translationdomain) }} {% if sortable %}</a>{% endif %} </th> {% endspaceless %} {% endif %} {% endfor %} </tr> </thead> {% endblock %} {% block table_body %} <tbody> {% include admin.gettemplate('outer_list_rows_' ~ admin.getlistmode()) %} </tbody> {% endblock %} {% block table_footer %} {% endblock %} </table> {% else %} <div class="info-box"> <span class="info-box-icon bg-aqua"><i class="fa fa-arrow-circle-right"></i></span> <div class="info-box-content"> <span class="info-box-text">{{ 'no_result'|trans({}, 'sonataadminbundle') }}</span> <div class="progress"> <div class="progress-bar" style="width: 0%"></div> </div> <span class="progress-description"> {% if not app.request.xmlhttprequest %} {% include 'sonataadminbundle:button:create_button.html.twig' %} {% endif %} </span> </div><!-- /.info-box-content --> </div> {% endif %} {{ sonata_block_render_event('sonata.admin.list.table.bottom', { 'admin': admin }) }} </div> {% block list_footer %} {% if admin.datagrid.results|length > 0 %} <div class="box-footer"> <div class="form-inline clearfix"> {% if not app.request.isxmlhttprequest %} <div class="pull-left"> {% if admin.hasroute('batch') , batchactions|length > 0 %} {% block batch %} <script> {% block batch_javascript %} jquery(document).ready(function ($) { $('#list_batch_checkbox').on('ifchanged', function () { $(this) .closest('table') .find('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]') .icheck($(this).is(':checked') ? 'check' : 'uncheck') ; }); $('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]') .on('ifchanged', function () { $(this) .closest('tr, div.sonata-ba-list-field-batch') .toggleclass('sonata-ba-list-row-selected', $(this).is(':checked')) ; }) .trigger('ifchanged') ; }); {% endblock %} </script> {% block batch_actions %} <label class="checkbox" for="{{ admin.uniqid }}_all_elements"> <input type="checkbox" name="all_elements" id="{{ admin.uniqid }}_all_elements"> {{ 'all_elements'|trans({}, 'sonataadminbundle') }} ({{ admin.datagrid.pager.nbresults }}) </label> <select name="action" style="width: auto; height: auto" class="form-control"> {% action, options in batchactions %} <option value="{{ action }}">{{ options.label }}</option> {% endfor %} </select> {% endblock %} <input type="submit" class="btn btn-small btn-primary" value="{{ 'btn_batch'|trans({}, 'sonataadminbundle') }}"> {% endblock %} {% endif %} </div> <div class="pull-right"> {% if admin.hasroute('export') , admin.isgranted("export") , admin.getexportformats()|length %} <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-export"></i> {{ "label_export_download"|trans({}, "sonataadminbundle") }} <span class="caret"></span> </button> <ul class="dropdown-menu"> {% format in admin.getexportformats() %} <li> <a href="{{ admin.generateurl('export', admin.modelmanager.paginationparameters(admin.datagrid, 0) + {'format' : format}) }}"> <i class="glyphicon glyphicon-download"></i> {{ format|upper }} </a> <li> {% endfor %} </ul> </div> &nbsp;-&nbsp; {% endif %} {% block pager_results %} {% include admin.gettemplate('pager_results') %} {% endblock %} </div> {% endif %} </div> {% block pager_links %} {% if admin.datagrid.pager.havetopaginate() %} <hr/> {% include admin.gettemplate('pager_links') %} {% endif %} {% endblock %} </div> {% endif %} {% endblock %} </div> {% if admin.hasroute('batch') %} </form> {% endif %} </div> {# when request not via ajax, add together next js-code trigger ajax-request, , uses normal a-href location #} {% if not app.request.xmlhttprequest %} <script> $('body').on('click', '.pagination li a', function(e){ var url = $(this).attr('href'); $.post(url, {}, function(response){ if(response.code == 100 && response.success){ $('#actionlist').replacewith(response.content); } } ); e.preventdefault(); homecoming false; }); </script> {% endif %} {% endblock %}

3. add together ajax template prevent original bundle output don't need:

yourbundle/resources/views/youradmin/ajax-list.html.twig:

{% block list_table %}{% endblock %}

4. add together custom crudcontroller thing left is, want overwrite original listaction can homecoming json in stead of pure html. add together yourcrudcontroller.php in yourbundle/controller/

add next

<?php namespace your\bundle\controller; utilize sonata\adminbundle\controller\crudcontroller controller; utilize symfony\component\httpfoundation\jsonresponse; utilize symfony\component\httpfoundation\request; class yourcrudcontroller extends controller { public function listaction(request $request = null) { // phone call original listaction function right html $response = parent::listaction($request); if($request->isxmlhttprequest()) { // disable profile, prevent profiler code $this->container->get('profiler')->disable(); // homecoming jsonresponse homecoming new jsonresponse(array('success' => true, 'code' => 100, 'content' => $response->getcontent())); } homecoming $response; } }

sit back, nail f5, click pager , enjoy!

sonata-admin