Entity list with ajax pagination


To list the entities in an ergonomic way, Open Orchestra uses the DataTables plugin. To improve performance, the pagination uses ajax calls.

For each display of the information on the page (i.e. paging, ordering, searching), the plugin makes an ajax request to the api with a number of parameters.


The different variables used to filter (pagination, search, ordering) send by the plugin are:

Parameter name Description
order[name] Column’s name to which ordering should be applied
order[dir] Ordering direction (asc or desc)
search[columns][name] Search value to apply to a specific column
search[global] Global search value
length Number of records displayed in the current draw
start Paging first record indicator

The search parameter is not present in the request if there is no value in all search input field.

Example of parameters sent:

In order to make the pagination operational, the api should return a facade filled with 4 parameters:
  • recordsTotal: Total number of entities
  • recordsFiltered: Number of entities matching the filters (search)
  • collectionName: The name of variable which contains the data (for instance if collectionName equals contents then the data will be in the variable $contents)
  • data: The data to be displayed in the table. This is an array who contains your data (facade entity) after filtering (search, order, pagination)

For instance, here comes the json returned by the api for listing the workflow functions:

    "workflow_functions": [


In the mapping :

  • type will take string as a default parameter if it is not specified.
  • With the mapping in annotation field will take the name of the property if it is not set.

By default the xml and yaml mapping files should be located in the folder Ressources/config/search of your bundle. To specify another folder, you must change the configuration :

                namespace_prefix: "My\\AppBundle"
                path: \@AppBundle/Ressources/config/mymapping

Custom search field of columns

By default, Open Orchestra provides differents search fields for columns (text, date, number and boolean). You can specify the fields types in the data attribute input-header of the navigation panel link (futher information in document of navigation panel).

To create a custom search field, you should create a backbone view and add it in the OpenOrchestra.DataTable.ViewFieldConfigurator.

For instance with the text field:

(($, OpenOrchestra) ->

   * @class TextFieldSearchView
  class TextFieldSearchView extends AbstractSearchFieldView

      'keyup input.search-column': 'searchColumn'

     * required options
     * {
     *   column: {integer} column index
     *   api: {object} DataTable api
     *   domContainer: {object} jquery element
     * }
     * @param {Object} options
    initialize: (options) ->
      @options = @reduceOption(options, [
      @loadTemplates [

     * @return {this}
    render: ->
      @setElement @renderTemplate('OpenOrchestraBackofficeBundle:BackOffice:Underscore/datatable/header/textField',
          column: @options.columnIndex
          value: @options.api.column(@options.columnIndex).search()

      return @

  OpenOrchestra.DataTable = {} if not OpenOrchestra.DataTable?
  OpenOrchestra.DataTable.ViewFieldConfigurator = {} if not OpenOrchestra.DataTable.ViewFieldConfigurator?
  OpenOrchestra.DataTable.ViewFieldConfigurator.text = TextFieldSearchView

) jQuery,
  window.OpenOrchestra = window.OpenOrchestra or {}

You can extend AbstractSearchFieldView to facilitate research and insertion of the field in the header.

The key in OpenOrchestra.DataTable.ViewFieldConfigurator defines the name used in data-attribute (input-header).

With this custom view, it is possible to create a completly dynamic field, not only static ones. By sending an ajax request in the view, the server can interact with the rendering of the search field for instance.