List of options accepted by Evolugrid

Here is a sample of all options available. Explanation is below:

{
    url: url, // The Ajax URL
    limit  : 100, // The maximum number of rows to be returned in one page
    tableClasses : "table", // The CSS class of the table
    pagerId : 'listePager' // The ID of the pager,
    export_csv: true, // Whether we can export to CSV or not,
    loadOnInit: true, // Whether we should start loading the table (true) or wait for the user to submit the search form (false),
    filterForm: "selector", // A jQuery selector pointing to the form containing the filters (if any)
    filterFormSubmitButton: "selector", // A jQuery selector pointing to the button that will trigger search. This is optional, and can only be used if the filterForm option is used. If not passed, any submit button on the form will trigger a search.
    filterCallback: function, // A function taking 0 arguments and returning a map of filters (passed as arguments to the Ajax URL). This is applied before the filterForm.
    rowCssClass: "key", // If set, for each row, we will look in the dataset for the row, for the "key" passed in parameter. The associated value will be used as a class of the tr row. 
    loaderImgDiv: "selector", // A jQuery selector pointing to a div that contains a ajax loader gif
    onRowClick: function, // Callback called when we click on a row. Callback signature: function(rowObject, event)
    columns: [
        {
            "title": "Name",
            "key": "name",
            "sortable": true,
            "escapeHTML": false,
            "cssClass": false
        },
        {
            "title": "First name",
            "key": "first_name"
        },
        {
            "title": "Edit",
            "jsrenderer": function(row) {
                return $("&lt;a/&gt;").text(row["name"]).attr("href", "/mylink.php?id="+row.id)
            }
        }
    ] 
}

This list of options can be passed to the evolugrid constructor OR via the "descriptor" key of the Ajax callback.

Name	Behaviour	Comment
url	Compulsory	The Ajax URL that will be called to get the data
limit	Default: 100	The maximum number of rows to be displayed
loadOnInit	Default: true	Whether the table should be loaded as soon as the page is loaded. If false, you will have to call the refresh method or wait for the search form to be submitted.
tableClasses		The CSS class applied to the table
pagerId		The ID that will be applied to the pager component. Please note that the pager is always created by evolugrid. It will just add the ID you pass to the pager it creates.
export_csv	Default: false	Set to true to add a CSV export icon in the pager. When the icon is clicked, the Ajax callback will be called, with the output=csv GET parameter passed.
rowCssClass		If this is set, for each row, Evolugrid will look in the dataset for this value and apply it to as a CSS class to the row. For instance, let's assume you set: { ... rowCssClass: "css" } Now, in your dataset, let's assumer there is a "css" property associated to the data of a row: [ { "label": "mouf", ... "css": "important" } ] Then the "important" class will be applied to the row.
loaderImgDiv		A jQuery selector pointing to a div that contains a ajax loader gif image. This loader image will be displayed each time a search is ongoing.
filterForm		A jQuery selector pointing to a form containing filters (that will be passed to the Ajax request)
filterFormSubmitButton		A jQuery selector pointing to the button that will trigger search. This is optional, and can only be used if the filterForm option is used. If not passed, any submit button on the form will trigger a search.
filterCallback		A function taking 0 argument and returning a map of filters (passed as arguments to the Ajax URL). This is applied before the filterForm. Returned parameters must match this format: [{ "name": "param1", "value": "paramValue" }]
onRowClick		A function taking 2 arguments and triggered when a row is clicked. Function signature: function(rowObject, event)
columns	Compulsory (in options or in callback)	An array of columns to be displayed in the table (see below)

Columns descriptors

The "columns" key of the options contains an array of column descriptors. A column descriptor contains:

Name	Behaviour	Comment
title	Compulsory	The title of the column to display
display	Compulsory (if no jsrenderer)	The key to map to in the Ajax dataset. This is also the key that will be returned to the Ajax callback when you try to sort on the column (if "sortable" is set)
jsdisplay	Optionnal	If set, this JS function will be used to render the cell. This should contain an anonymous Javascript function, taking one parameter (the data row being displayed) and returning a jQuery node representing the HTML to put in the cell. Here is a sample to display a link (assuming the data row contains an "id" and a "name" parameter): function(row) { return $("<a/>").text(row["name"]).attr("href", "/mylink.php?id="+row.id) }
sortable	Boolean, optionnal	Whether we can sort upon this column or not. Defaults to false.
sortKey	Optionnal	The key to sort upon. If not available, the "key" will be used as a sort key. Only used if "sortable"=true.
escapeHTML	Boolean, optionnal	Whether the data displayed in this column should be HTML escaped or not. This is only applied for "key" columns. If a "jsrenderer" is set, this parameter is ignored. Defaults to true.
cssClass	String, optionnal	The CSS Class that should be added to all cells of the column
width	Optionnal	The width of the column. Just like the CSS width property, you can express it in %, px, em, etc...

Javascript stand-alone mode PHP mode

Found a typo? Something is wrong in this documentation? Just fork and edit it!