To create a manage screen by using DataTable:

Dependencies:

• manage service

 

Create the manage query array as like we do in enterprise manage screens.

[module.set_array args]
  [after_submit raw]
    [query]
      [pagesize]30[/pagesize]
      [offset][request.get start /][/offset]
      [query_count]yes[/query_count]
      [with]
        [sql]
          select object_id as data_id from careers_meta where meta_key='candidate_id'
        [/sql]

        [add_field new table=careers_meta aw2_meta_key='{env.order_key}' coll_id='candidate' not_empty='{env.order_key}' /]

        [filter new not_empty={request.generic}]
          [sql raw]
            select [module.previous_query_no /].* from careers_meta join [module.previous_query_no /] on 
            [module.previous_query_no /].data_id=careers_meta.object_id 
                        and 
            careers_meta.coll_id='candidate'
            and
            meta_key in ('first_name','middle_name','last_name','email') and meta_value like '%[aw2.get request.generic /]%'
          [/sql]
        [/filter]

        //******search based on filters******//
        [filter new field='created_datetime' before_date='{request.end_date}' not_empty="{request.end_date}"  /]
        [filter new field='created_datetime' after_date='{request.start_date}' not_empty="{request.start_date}"  /]
      [/with]
      [transform ref_id=data_id /]
      [meta new]
        [table]careers_meta[/table]
        [aw2_collection_keys]candidate_id,first_name,middle_name,last_name,created_datetime[/aw2_collection_keys]
        [coll_id]candidate[/coll_id]
      [/meta]
      [order]
        [env.get order_key default='data_id' /] [env.get order_dir default='DESC' /]
      [/order]
    [/query]
      [table]
        [column new label='First Name' meta_key='first_name' class='']
          [calc]
            return "<a href='[app.path /]/candidate/" + row.candidate_id + "' data-id='" + row.candidate_id + "' class='row-single-point'>" + data + "</a>"
          [/calc]
        [/column]
        [column new label='Last Name' meta_key=last_name class='no-sort' /]
        [column new label='Received On' meta_key='created_datetime' class='no-sort']
          [calc]
            return data;
            //return spa.manage_api.manage_date(data);
          [/calc]
        [/column]
      [/table]
    [datascript]
      function(d){
        d.start_date= spa.manage_api.filters.start_date,
        d.end_date= spa.manage_api.filters.end_date,
        d.generic= spa.manage_api.filters.generic,
        d.view= spa.manage_api.filters.view,
        d.department= spa.manage_api.filters.department
      }
    [/datascript]
    [extraparams]
      "order": [[ 0, "desc" ]]
    [/extraparams]
  [/after_submit]
[/module.set_array]

for more reference about above config see following tutorials:

• List of options in “args” array used to build Enterprise Manage Screens
• How to create Manage Screens using Awesome Enterprise

 

Datatable sends some parameter to this array we can use these parameters to limit results or sort the data

as above in offset key I pass the ‘start’ parameter from the request this parameter is sent by the datatable ajax request.

ordering keys:

• env.order_key: this variable will return the column key on which sorting to be done
• env.order_dir: this variable will return the direction of the sorting eg: asc,desc

Columns:

[column new label='Last Name' meta_key=last_name class='no-sort' /]

To pass the css classes to the columns add the class parameter to the column array

To remove sorting for the particular column just add the no-sort class to that column

If one of column needs to have custom html then this can be done by using calc variable as bellow

[column new label='First Name' meta_key='first_name' class='']
  [calc]
    return "<a href='[app.path /]/candidate/" + row.candidate_id + "' class='row-single-point'>" + data + "</a>"
  [/calc]
[/column]

In this example calc value should be the javascript return statement this return value will be added in every column by the DataTable

The value of the column can be access by using data variable, and all the current row parameters can be accessed using row parameter.

We can use a javascript function to process the column value. eg: if we are getting the column value as 1995-07-16 05:05:05 and we want to show this is this format 05:05 16 Jul 1995

then we can use javascript function as follows:

[column new label='Received On' meta_key='created_datetime' class='no-sort']
  [calc]
    return spa.manage_api.manage_date(data);
  [/calc]
[/column]

In above example I am calling the manage_api library of the current app and calling the manage_date function which will change the date format of the given date.

datascript:

To filter the datatable result we need to pass the filter parameters to achive this datascript parameter is used.

In this parameter write the javascript function which will mention the all the filter parameters, this parameter will available in request at server side.

To learn more about this function view this forum

eg:

[datascript]
  function(d){
    d.start_date= spa.manage_api.filters.start_date,
    d.end_date= spa.manage_api.filters.end_date,
    d.generic= spa.manage_api.filters.generic,
    d.view= spa.manage_api.filters.view,
    d.department= spa.manage_api.filters.department
  }
[/datascript]

In the above code the function set the filter parameters by accessing the spa.manage_api.filters array.

extraparams

To add more parameter while creating the DataTable instance this parameter is used

[extraparams]
  "order": [[ 0, "desc" ]]
[/extraparams]

In the above code default order column provided.

Manage Service – datatable

Pass the configuration array to the manage service datatable module

as like

[manage_service.datatable args='{module.args}' /]

this service will create the view for the datatable

Datatable Instance

The javascript datatable instance variable  name is stored in  env variable named as datatabletoken

this instance can be accessed as spa.[env.get datatabletoken /]

in the below example I have added function on init trigger of datatable instance.

spa.[env.get datatabletoken /].on( 'init',   function (){count_update()});

Automatic CSV Download:

To download the csv data of the filtered result call this js function

spa.[env.get datatabletoken /]_csv();

OR just add this class to the button on which after clicking CSV should be downloaded

class:

[env.get datatabletoken /]_csv_btn

Note: the csv data is got from the server response, so any html changes in the column of datatable wont affect the csv data.