The next of the data display mechanisms within Cliqon is the Datatable. Unlike the Datagrid, the Datatable depends for its structure and layout upon a traditional HTML table that is formatted by the Bootstrap 4 style sheet, that is coded into the component template - datatable.tpl.


The Datatable component template for use in the Admin system will be found in /admin/components/. The content of the component template starts with an ordered list (<ol />) which contains the Breadcrumb bar and top buttons.


The template then creates a card and card block according to the standard administrative template. The opportunity exists in this template to locate a few buttons or other facilities immediately above a given table in a toolbar. However the majority of the datatable layout and its Vue derived data content are contained within an HTML table with an id of "datatable".

Table configuration

The following paragraphs and code examples will explain how we configure and implement the Datatable. A few items are enhanced on the template by the Datatable Method within Admin.php, but the majority of the table generation activities are performed by Vue working with and populating the Datatable.


The Datatable has two Header rows. In the top row, you will find any search input fields that have been configured for a given column. The display of this row is controlled by the existence of any column search fields being configured and setting the key "tableSearch" to "true". Column headers will be displayed in the second header row.


The table body section contains two rows. The first row and its one cell, are displayed if there is no content to display. The second row is the repeatable row which contains the appropriate data. The leftmost column is a checkbox. The rightmost column contains the row icons. In between are the dynamic columns of this specific table. Finally, outside and below the table, is a Navigation div which contains a pagination or pager component.


As we have already explained, Datatable follows the standard configuration of having three component configurations to create a Datatable.

Service record

Starting with the Service record for "datatable" in our ubiquitous TOML format.


classes = 'table table-no-bordered table-condensed table-sm'

style = 'min-height:680px;'

tableId = 'datatable'

tableSearch = 'true'

idField = 'id'

uniqueId = 'id'

toolbar = '#toolbar'


; General options

search = ''

orderby = 'c_reference|asc'        

; Page or offset selector

pageselect = '5,10,15,20,25'


; Related to translation and display of pager

[pager]

       ; Pager / Video Control

       first = '<<'

       prev = '<'

       next = '>'

       last = '>>'

       size = '5'        


; Table pagination and operational defaults

[records]

       limit = 15

           offset = 0                                  

       start = 1

       end = 15

       total = 0

       page = 1


; Top buttons

[topbuttons]

[topbuttons:reportbutton]

       class = 'primary'

       icon = 'flag-o'

       title = '287:Report'

       order = 'b'


........


[topbuttons:helpbutton]

       class = 'info'

       icon = 'info'

       title = '85:Help'

       order = 'x'

       [rowicons]


Given that the concept and content of a Service record have been explained previously and that we believe that our nomenclature for keys is self-explanatory it is difficult to see any key / value combinations that require more explanation.

Collection record

The Collection record adds more to the overall configuration.


[datatable]

; General options

url = '/ajax/en/gettabledata/dbitem/'

orderby = 'c_reference ASC'

search = ''


; Table pagination and operational defaults

[datatable:records]

limit = 10

end = 10


[datatable:columns]

[datatable:columns:id]

field = 'id'

title = '9999:Id'

order = 'b'

valign = 'top'


[datatable:columns:c_reference]

field = 'c_reference'

title = '5:Reference'

valign = 'top'

order = 'c'

searchable = 'true'

sortable = 'true'


[datatable:columns:c_notes]

field = 'c_notes'

title = '8:Notes'

valign = 'top'

order = 'z'


; Top buttons

[datatable:topbuttons:reportbutton]

class = 'primary'

icon = 'flag-o'

title = '287:Report'

reporttype = 'popupreport'

order = 'b'


[datatable:rowicons:editrecord]

icon = 'pencil'

formid = 'columnform'


[datatable:rowicons:viewrecord]

icon = 'eye'

formid = 'columnform'


[datatable:rowicons:deleterecord]

icon = 'trash'

Model record

Finally, the Model record provides the last piece of the jigsaw.


; Datatable array must be set for straight entries

[datatable]

       url = '/ajax/{common.lcd}/gettabledata/dbitem/news/'


       [datatable:columns:c_status]

               field = 'c_status'

               title = '199:Status'

               valign = 'top'

               searchable = 'false'

               sortable = 'false'

               order = 'd'

               type = 'list'

               action = 'changestatus'

               list = 'statustypes'

               params = 'list|statustypes'

               class = 'nowrap pointer redc uline'


       [datatable:columns:d_date]

               field = 'd_date'

               title = '183:Date'

               valign = 'top'

               searchable = 'false'

               sortable = 'false'

               order = 'e'

               type = 'date'

               class = 'nowrap'


       [datatable:columns:d_author]

               field = 'd_author'

               title = '420:Author'

               valign = 'top'

               searchable = 'true'

               sortable = 'false'

               order = 'f'


       [datatable:columns:d_title]

               field = 'd_title'

               title = '456:Summary'

               valign = 'top'

               searchable = 'true'

               sortable = 'false'

               order = 'j'

               type = 'titlesummary'

               summary = 'd_description'


       [datatable:columns:d_image]

               field = 'd_image'

               title = '217:Image'

               valign = 'top'

               searchable = 'false'

               order = 'k'        

               type = 'image'

               sortable = 'false'

               class = 'h80'


       [datatable:rowicons:editrecord]

               icon = 'pencil'

               formid = 'popupform'


       [datatable:rowicons:editcontent]

               icon = 'file-o'

               formid = 'popupform'


       [datatable:rowicons:viewrecord]

               icon = 'eye'

               formid = 'popupform'


       [datatable:rowicons:deleterecord]

               icon = 'trash'


       [datatable:topbuttons:addrecord]

               class = 'success'

               icon = 'plus'

               action = 'addbutton'

               title = '100:Add'

               tooltip = '234:Add record'

               formtype = 'popupform'

               order = 'a'


Once again, the configuration is mostly self explanatory. A sub array for a Datatable column effectively contains two sets of key-value pairs. One set is interpolated by Vue for use in the column headers and the second set for use in a table cell. Apart from the column title which is extended within the Datatable Method in Admin.Php, the majority of the column configuration is used by Vue.


If search is configured for a column, a search field is provided above the title. If a column can be sorted in an ascending or descending direction, an icon will appear next to the title. Other key-value pairs are used by the cell. These include Class, Paramaters, Id, Vertical Alignment, and the Format type.


All Datatables rely on recordsets that have been paginated at source by the AJAX call to Class Db, Method getTableData(). All the Javascript for the Vue handling of the Table plus the Pagination are handled within the Cliq Javascript file and Class.





Created with the Personal Edition of HelpNDoc: Create cross-platform Qt Help files