The Datalist display depends for its structure and layout upon HTML that is formatted by the Bootstrap 4 style sheet and is coded into the component template - admdatalist.tpl.

The Datalist 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 container and within that container a row, according to the standard administrative template. There is no outer card or card block, instead there are two columns. The first will become the list with a header and the second is a card and card-block displaying a column form or a results bloc.

The list column is divided into three divs. In the first, we find a search facility. Entries in this search field are handled by a Vue search mechanism and thus displays results found from any of the data accessible to Vue. The second Div contains an overall list group with individual list items managed and repeated by Vue. The third and final Div contains a pagination facility.

List Configuration

The following paragraphs and code examples will explain how we configure and implement the Datalist. As we have previously explained, Datalist follows the standard configuration of having three component configurations to create a Datalist.

Service record

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

tableId = 'datalist'

tableSearch = 'true'

idField = 'id'

uniqueId = 'id'

search = ''

orderby = 'c_reference|asc'

; Page or offset selector

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

; Related to translation and display of pager


       ; Pager / Video Control

       first = '<<'

       prev = '<'

       next = '>'

       last = '>>'

       size = '5'

; Table pagination and operational defaults


       limit = 15

       offset = 0

       start = 1

       end = 15

       total = 0

       page = 1


       viewwidth = 760

       viewheight = 600


       icon = 'eye'

       formid = ''


       icon = 'pencil'

       formid = 'columnform'


       icon = 'trash'

; Top buttons



       class = 'primary'

       icon = 'flag-o'

       title = '287:Report'

       order = 'b'


       class = 'warning'

       icon = 'refresh'

       title = '122:Reset'

       order = 'c'


       class = 'info'

       icon = 'info'

       title = '85:Help'

       order = 'x'

The Service record contains three sections: general, list icons and top buttons. Every one of these settings has been described in previous sub-sections.

Collection record

In the Collection record we have various configurations which add or update the service record. The ones to note are pagination [datalist:records] which controls the display of items per page; columns [datalist:columns] which sets a cell format type for any candidates to display in a list item; and the list item buttons or icons.


       ; General options

       url = '/ajax/en/getlistdata/dbitem/'

       orderby = 'c_reference ASC'

       search = ''

; Table pagination and operational defaults


       limit = 10

       end = 10


       type = 'text'


       type = 'text'


       type = 'text'


       type = 'text'


       class = 'info'

       label = '85:Help'

       tooltip = '444:Display the help for this screen'

       action = 'help'



       label = '131:Print'

       tooltip = '443:Print data in list format'

       action = 'print'

       class = 'success'


       ; [footer:pagination]

       ; type = 'numeric'

Model record

Finally we have the Model record:


       url = '/ajax/{common.lcd}/getlistdata/dbitem/text/'


               label = '100:Add'

               tooltip = '234:Add new Section'

               formid = 'columnform'

               action = 'addbutton'

               class = 'primary'


       icon = 'file-o'

       formid = 'popupform'

       ; Top buttons


               class = 'danger'

               icon = 'plus'

               title = '100:Add'

               tooltip = '234:Add new Section'

               formid = 'dataform'

               formtype = 'popupform'

               order = 'a'

Note how the URL to obtain the data for the list content is included at this stage. Also list item buttons and top buttons are amended at this level.

Created with the Personal Edition of HelpNDoc: iPhone web sites made easy