elxisGrid

Generate dynamic tables with filtering, search, sorting and other cool features.

Elxis grid allows you to easily generate dynamic tables with filtering, search, sorting and other cool features. elxisGrid is a PHP API that uses Flexigrid and jQuery in the backend but can be changed at any time without having to change the implementation code due to the Elxis API. The Flexigrid javascript class used by Elxis is an improved by Ioannis Sannos version with RTL support, task setting and data filtering capabilities.

General usage

Set grid options

Method setOption allows you to set/overwrite grid options.

Available options are:

• element The id of the grid table (can also be set in the constructor).
• title A title (optional) that will be displayed in the top of the table (optional - can also be set in the constructor)
• url The URL the grid will load the data from.
• datatype json/xml - the method of the ajax request to load the data.
• sortname The name of the default sorting column
• sortorder asc/desc - The default sorting order
• usepager true/false - Wether to display paging or not
• userp true/false - Wether to display the option to set the number of rows per page or not
• resizable true/false - Wether the columns will be resizable or not
• showtabletogglebtn true/false - Wether the table will be able to toggle on and off.
• showtogglebtn true/false - Wether the columns will be able to toggle on and off.
• singleselect true/false - Not used
• rp The default number of rows per page (10 by default).
• width Grid table width. Can be an integer (pixels) or 100%.
• height Grid table height. Can be an integer (pixels) or auto.
• dir ltr/rtl. This is set automatically on the constructor depending on the current language's direction. So normally, you never have to set it.

Example

Add columns to the grid

Method addColumn allows you to add columns to the grid. The only required option is the column's title. $filteroptions can also be declared later with the addFilter method.

Example

The sum of the widths of all columns in standard Elxis grid implementations are not greater than 980 pixels inorder to support a minimum screen resolution of 1024x768 pixels.

Add buttons

Adds a button. When the button is clicked the javascript function set in the $onpress attribute (optional) is executed. CSS class $class can be empty or add, delete, edit, toggle, filter, and more.

Add separator

Adds a vertical line (separator) in the grid's buttons area. Use it to separate your buttons into groups.

Add search

Set searchable elements.

Example

Add filter

Adds a filter in the grid's search area. See also the addColumn method.

Example

Display the grid

When finish configuring your grid use the render method to generate and output it's HTML.

Example

Previous article

elxisPlugin

Next article

elxisParameters