JSON:
{"list": [{"id": 1, "name": "Washington Botelho", "email": "gridy@wbotelhos.com"}], "total": 1}
- The JSON must have a list of object and an attribute with the total length.
Script:
$('#grid').gridy({ url: '/gridy' });
- Just especify your URL that will returns the JSON;
- That's all, but you'll want to use other cool features.
HTML:
<table id="grid"></table>
- Where the grid will appears;
- In this case we're using the default template "gridy-default", but you can create your own. (:
- This target element can be any you want.
Template:
<script id="template" type="text/x-jquery-tmpl">
   <tr>
      <td>${name}</td>
      <td>${email}</td>
   </tr>
</script>
- You build a jQuery Template with an ID to be hooked;
- The main purpose of Gridy is to provide the flexibility to use any data structure, not just an old table;
- The first element inside the template will be the row and the direct children will be the columns;
- This structure will be repeated as many times as the total number of objects returned in JSON;
- If you are using some framework like Spring or EL (Expression Language), scape the '$' to avoid conflicts: \${ } or <c:out value="${ }"/>.
Query String:
search=__&page=__&sortname=__&sortorder=__&find=__&rows=__
- search: the term you want to search;
- page: the number of the page you want to view;
- sortname: the name of the column of the database you want to sort by;
- sortorder: the order you want to sort the result: ascending or descending;
- find: the name of the column you want to search;
- rows: the number of rows you want to display in each page;
- * You can append more attributes using the 'params' or 'paramsElements' option.
Server side example (Java/VRaptor):
@Get("/gridy")
public void gridy(String search, int page, String sortName, String sortOrder, String find, int rows) {

}
Ajax Options:
always: undefined / using undefined jQuery will consider it as: undefined
$('#grid').gridy({
  url: '/gridy',
  always: function(jqXHR, textStatus) {
    alert('Successfully completed!');
  }

});
Function executed when the grid finish the request.
Explanation: you can stop a loading message when request finish.

cache: undefined / using undefined jQuery will consider it as: true, false for dataType 'script' and 'jsonp'
$('#grid').gridy({
  url: '/gridy',
  cache: true
});
Enables the ajax cache.
Explanation: you can enable de ajax cache to avoid reload some data.

contentType: undefined / using undefined jQuery will consider it as: 'application/x-www-form-urlencoded'
$('#grid').gridy({
  url: '/gridy',
  contentType: 'jsonp'
});
The content type of the ajax request.
Explanation: you can do a cross domain request with JSONP.

dataType: 'json' / using undefined jQuery will consider it as: Intelligent Guess (xml, json, script, or html)
$('#grid').gridy({
  url: '/gridy',
  dataType: 'xml'
});
The data type of the ajax request.
Explanation: you can receive the data as XML. * For now just JSON is supported!

done: undefined / using undefined jQuery will consider it as: undefined
$('#grid').gridy({
  url: '/gridy',
  done: function(data, textStatus, jqXHR) {
    alert('Successfully loaded!');
  }

});
Function executed when the grid loads successfully.
Explanation: you can get the data returned from request and display a success message.

fail: undefined / using undefined jQuery will consider it as: undefined
$('#grid').gridy({
  url: '/gridy',
  fail: function(jqXHR, textStatus, errorThrown) {
    alert('Some thing is wrong!');
  }

});
Function executed when occurs an error.
Explanation: you can recover an error and display it, or take a workaround decision.

jsonp: undefined / using undefined jQuery will consider it as: no effect.
$('#grid').gridy({
  url: '/gridy',
  jsonp: true
});
Override the callback function name in a jsonp request.
Explanation: you can override the callback name. jQuery 1.5+ you can set it to false to avoid append of "?callback" or "=?" and set the name using jsonpCallback option.

jsonpCallback: undefined / using undefined jQuery will consider it as: random value
$('#grid').gridy({
  url: '/gridy',
  jsonpCallback: 'MyCallbackName'
});
Specify the callback function name for a JSONP request.
Explanation:
- You can change the name of callback manually;
- Using static name you can have a better browser caching;
- But it is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling

page: 1
page
$('#grid').gridy({
  url: '/gridy',
  page: 3
});
The number of the page to be displayed.
Explanation: you can choose the number of the page you want to start.

params: {}
$('#grid').gridy({
  url: '/gridy',
  params: { 'language': 'pt_BR', 'status': 1 }
});
...&language=pt_BR&status=1
A hash of parameters to be added to the query string.
Explanation: you can pass extra parameter to filter your search.

paramsElements: []
<input id="language" type="text" name="language" value="pt_BR" />

<input type="checkbox" name="status" value="0" checked="checked" class="status" />
<input type="checkbox" name="status" value="1" class="status" />
<input type="checkbox" name="status" value="2" checked="checked" class="status" />

<select name="entity.year">
  <option value="2011">2011</option>
  <option value="2012" selected="selected">2012</option>
  <option value="2013">2013</option>
</select>
$('#grid').gridy({
  url: '/gridy',
  paramsElements: ['#language', '.status', '[name="entity.year"]']
});
...&language=pt_BR&status[]=0&status[]=2&entity.year=2012
Array of selectors of field to use the name and value as parameter.
Explanation:
- You can pass dinamically extra parameter coming from fields elements:
- The name of field will be the key and the value will be the value of that key;
- If the selector is a class then the parameters will be send as a array.

sortName: ''
sortName
$('#grid').gridy({
  url: '/gridy',
  sortName: 'attribute'
});
Name of the default column sorted.
Explanation: you can choose a column of the grid to be sorted alphabetically.

sortOrder: 'asc'
sortOrder
$('#grid').gridy({
  url: '/gridy',
  sortOrder: 'desc'
});
Order of classification.
Explanation: you can choose to sort the data in a column in ascending or descending order.

type: 'get'
$('#grid').gridy({
  url: '/gridy',
  type: 'post'
});
Type of the HTTP request.
Explanation: you can change the verb to get, post, delete or put, but it is a search, then it is recommended that you use the default get.

url: '/gridy'
$('#grid').gridy({
  url: '/user/gridy',
  type: 'post'
});
URL to request the data.
Explanation: you can change the URL to receive your data. Don't forget to prepend the context of your application.
Callback Options:
before: undefined
$('#grid').gridy({
  url: '/gridy',
  filter: function(page, sortName, sortOrder) {
    return { page: 2, sortName: 'value', sortOrder: 'desc' };
  }

});
Function executed before the grid call the request.
Explanation:
- You can receives the parameters 'page', 'sortName' and 'sortOrder' before the grid request the URL
- You can override each one of that attributes returning a hash with the desired values.

filter: undefined
$('#grid').gridy({
  url: '/gridy',
  before: function(data, page, sortName, sortOrder) {
    if (page == 10) {
      data.total = 0;
      return data;
    }
  }

});
Function executed when the data is returned from request.
Explanation:
- You can receives the parameters 'data' that is the content of request, 'page', 'sortName' and 'sortOrder' when the data returned from request
- You'll receives the data as an object, then you can change and return it to the original data be overrided like a filter.
- The data will be overrided only if you return some object.
Content Options:
columns: []
columns
$('#grid').gridy({
  url: '/gridy',
  columns: [
    { name: 'Attribute', value: 'attribute', width: 100, clazz: 'special' },
    { value: 'value', width: 200 },
    { name: 'Description', width: 300 },
    { width: 50 }
  }

});
Array of objects that represents the columns with name, value, width and clazz.
Explanation:
- You can choose to have the column label, it will be read-only, it will have a different style, or if nothing is displayed on header label;
- 1. Has all attributes;
- 2. Don't has a label then we can't click it to make a sort and nothing is displayed on label, but it is sorted, then the arrow shows;
- 3. Has the label, but don't has the value necessary to send to the query to be sorted, then it is read-only. It shows arrows indicating the sort;
- 4. Has just the width;
- 5. Was not declared, then don't have any special config. All attributes are optional;
- 6. Idem item 5;
- 7. The headers will take all values from 'columns' unless you override it using the specific 'headers' option to build columns and headers with different size;
- 8. The width from 'headers' will be applied only on header, so you can, for example, build a grid with one column (900px) and three headers (300px).

scroll: false / height: undefined
$('#grid').gridy({
  url: '/gridy',
  height: 200,
  scroll: true

});
Enables the display of the grid with scroll.
Explanation:
- You can choose the scroll style when you need a bunch of grid on the same screen with poor space;
- The 'height' attribute is mandatory, because scroll must has a vertical delimiter to be builded;
- The 'height' attribute just works with 'scroll' option.

style: 'table'
$('#grid').gridy({
  url: '/gridy',
  style: 'free'
});
<script id="template" type="text/x-jquery-tmpl">
  <div>
    <div>${attribute}</div>
    <div>${value}</div>
    <div>${description}</div>
    <div>${version}</div>

    <div class="gridy-button">
      <a href="javascript:void(0);">edit</a>
    </div>
  </div>
</script>
Change between table and free style of template.
Explanation:
- You can use any structure on your template, not only the old table;
- In fact, Gridy was build with this goal: do cool things on your way;
- You can use combinate ul and li or any elements you want, build the template the way you want;
- On the example above we dicide to use only divs.

width: undefined
width
$('#grid').gridy({
  url: '/gridy',
  width: 1000
});
Width of the grid.
Explanation: you can choose the width based on you screen space. Some grid needs less or more space then other.
Design Options:
evenOdd: false
evenOdd
$('#grid').gridy({
  url: '/gridy',
  evenOdd: true
});
Enables the even odd row style.
Explanation: you can enable this option to make better the difference between the lines.

resize: true
resize
$('#grid').gridy({
  url: '/gridy',
  resize: false
});
Apply the same width of the content to the other wrappers.
Explanation:
- This option to make sure that wrappers main, header, content, footer and buttons has the same size.
- You can turn off this option to choose a free size for each one of that wrapper.

separate: true
separate
$('#grid').gridy({
  url: '/gridy',
  separate: false
});
Change the style of the first line on grid.
Explanation: you enable this option to make more clearly the division between header and the rows.

skin: 'gridy'
$('#grid').gridy({
  url: '/gridy',
  skin: 'strong-layout'
});
.gridy .gridy-header { font-weight: normal; }
.strong-layout .gridy-header { font-weight: bold; }
Name of the root class name style "CSS prefix".
Explanation:
- You can choose different skin for each gridy and take advantage from selectors precedence to be possible use different style for each one;
- On the example above we are applying style on the same container, but the precedence indicates about what gridy we are talking;
- In this way you can creates a bunch of skin for your grid.
Effect Options:
clickFx: false
clickFx
$('#grid').gridy({
  url: '/gridy',
  clickFx: true
});
Enables rows selection with different style on click.
Explanation:
- You can enable it to be possible click to do a line selection;
- Hold ctrl/command key to do more then one selection.

hoverFx: false
hoverFx
$('#grid').gridy({
  url: '/gridy',
  hoverFx: true
});
Enables highlight rows on mouseover.
Explanation:
- You can enable it to highlight the row where the mouse is over;
- It can help you to read the grid when there is a lot of rows.
Find Options:
find: ''
$('#grid').gridy({
  url: '/gridy',
  find: 'value'
});
...&find=value
Name of the column where research will be done.
Explanation:
- You choose wich column do you want to do a search;
- If your WHERE needs more parameters, then use 'params' or 'paramsElements' it.

finds: []
finds
$('#grid').gridy({
  url: '/gridy',
  finds: [
    { name: 'Attribute', value: 'attribute' },
    { name: 'Value', value: 'value' },
    { name: 'Description', value: 'description' },
    { name: 'Version', value: 'version' }
  ]

});
List of objects with the name and value representing the avaliable columns for search.
Explanation:
- You can choose the columns you want make possible to do a search;
- You choose the value corresponding to the database column and a pretty name to be displayed to the user;
- Normally we put all values from columns, but you can choose even values ‚Äč‚Äčthat are not listed.

findTarget: undefined
findTarget
<div id="target">Find:</div>
$('#grid').gridy({
  url: '/gridy',
  findTarget: '#target'
});
Selector of the place where the "find" element will be appended.
Explanation:
- For default the find box is located on the right side of the search field, but you can change the place of it;
- To change the place, just provide a jQuery selector to indicate the new place.
Header Options:
arrowDown: 'gridy-arrow-down'
arrowDown
.arrow-down-big { background: url('big-arrow-down.png'); }
$('#grid').gridy({
  url: '/gridy',
  arrowDown: 'arrow-down-big'
});
Class with background used as icon on the descending sort.
Explanation: you can change the background icon with one you like.

arrowNone: 'gridy-arrow-none'
arrowNone
.arrow-no-sorted { background: url('no-sorted-arrow.png'); }
$('#grid').gridy({
  url: '/gridy',
  arrowNone: 'arrow-no-sorted'
});
Class with background used as icon when there is no sort by especific field.
Explanation: you can choose an empty image to hide the arrow when there is no sort.

arrowUp: 'gridy-arrow-up'
arrowUp
.arrow-up-big { background: url('big-arrow-up.png'); }
$('#grid').gridy({
  url: '/gridy',
  arrowUp: 'arrow-up-big'
});
Class with background used as icon on the ascending sort.
Explanation: you can change the background icon with one you like.

headers: []
headers
$('#grid').gridy({
  url: '/gridy',
  columns : [
    { width: 1000 }
  ],
  headers : [
    { name: 'Attribute', value: 'attribute', width: 100, clazz: 'special' },
    { name: 'Value', value: 'value', width: 100 },
    { name: 'Description', value: 'description', width: 600 },
    { name: 'Version', value: 'version', width: 100 },
    { width: 100 }
  ],
  }

});
Array of objects that represents each header columns of the grid with name, value, width and clazz.
Explanation:
- See options 'column'!
- Whats the difference of 'columns' option?:
+ 1. On first look, nothing! But when you want a different width between headers and columns you must declare all options on 'headers' and just the width on 'columns';
+ 2. 'headers' has priority over columns less the attribute 'width' that each one has your own;
+ 3. If you declare 'name', 'value' and 'clazz' in both option, only the attributes of 'headers' will be considered;
+ 4. If you don't need different widths, then use just columns to be more visible de configuration.

Page Options
buttonBackTitle: '‹ Back'
buttonBackTitle
$('#grid').gridy({
  url: '/gridy',
  buttonBackTitle: 'Previous'
});
Title of the navigation button back.
Explanation: you can choose a tip for what is that button on mouse over.

buttonMax: 10
buttonMax
$('#grid').gridy({
  url: '/gridy',
  buttonMax: 1
});
Number of paging buttons visible.
Explanation: you can choose to see just a few buttons page and let the responsibility to the back and next button.

buttonNextTitle: 'Next ›'
buttonNextTitle
$('#grid').gridy({
  url: '/gridy',
  buttonNextTitle: 'Forward'
});
Title of the navigation button next.
Explanation: you can choose a tip for what is that button on mouse over.

buttonOption: true
buttonOption
$('#grid').gridy({
  url: '/gridy',
  buttonOption: false
});
Shows the pagination buttons.
Explanation: maybe you don't want to show the page buttons, even if it has more than one page to show.

buttonTitle: 'Page'
buttonTitle
$('#grid').gridy({
  url: '/gridy',
  buttonTitle: false
});
Text prepended in the button title with it number.
Explanation: you can change the title for a good button page description.
JSON Options
listPath: 'list'
{ "root": { "data": [{"id": 1, "name": "Washington Botelho", "email": "gridy@wbotelhos.com"}] }, "total": 1 }
$('#grid').gridy({
  url: '/gridy',
  listPath: 'root.data'
});
The JSON root name.
Explanation:
- You can receive a JSON list in the node you choose.
- It can be at any depth.

totalPath: 'total'
{ "list": [{"id": 1, "name": "Washington Botelho", "email": "gridy@wbotelhos.com"}], "total": { "value": 1 } } }
$('#grid').gridy({
  url: '/gridy',
  totalPath: 'total.value'
});
Path of the total element.
Explanation:
- You can change the path where you find the total value.
- It can be at any depth.

template: 'template'
<script id="template-free" type="text/x-jquery-tmpl">
  <div>
    <div>${attribute}</div>
    <div>${value}</div>
    <div>${description}</div>
    <div>${version}</div>
  </div>
</script>
$('#grid').gridy({
  url: '/gridy',
  template: 'template-free'
});
The ID of the script template loaded.
Explanation:
- If you have more than one kind of grid in you page with different structure, then you will need to create more than one template.
- For default the template with ID equals 'template' is called by Gridy, but you can creates other template and gives another ID to be hooked.
Loading Options
loadingIcon: 'gridy-loading'
loadingIcon
.loading-icon { background: url('loading.png'); }
$('#grid').gridy({
  url: '/gridy',
  loadingIcon: 'loading-icon'
});
Name of the class used as a loading icon.
Explanation: you can change the loading icon or even take it off.

loadingOption: true
$('#grid').gridy({
  url: '/gridy',
  loadingOption: false
});
Enables the presentation of the loading message.
Explanation: maybe you want turn the loading message off and do your own.

loadingText: 'Loading...'
loadingText
$('#grid').gridy({
  url: '/gridy',
  loadingText: 'Wait a momente please...'
});
Text that will appear during the loading.
Explanation:
- You can set a text to explain that Gridy is loading.
- If your intention is just show the icon, than let this option with a empty text.
Message Options
messageOption: false
messageOption
$('#grid').gridy({
  url: '/gridy',
  messageOption: false
});
Enables the display of messages about the grid.
Explanation:
- You can show error, success, warning and notice messages on this container.
- Error message throwed by application is showed on that automatically.

messageTimer: 4000
$('#grid').gridy({
  url: '/gridy',
  messageTimer: 2000
});
Time in milliseconds in which the messages will remain on the screen.
Explanation:
- If you want give more time to the user read the message, just increase the time.
- The time is in milliseconds, to convert it to second just divide by 1000.
Other Options
debug: false
debug
$('#grid').gridy({
  url: '/gridy',
  debug: true
});
Shows details of the grid request.
Explanation: to know about data that is sending on request.
Refresh Options
refreshIcon: 'gridy-button-refresh'
refreshIcon
.refresh-button { background: url('refresh.png'); }
$('#grid').gridy({
  url: '/gridy',
  refreshIcon: 'refresh-button'
});
Button to refresh the data of the grid.
Explanation: if someone alter some information on the grid you current vision will be old, then refresh it.

refreshOption: true
$('#grid').gridy({
  url: '/gridy',
  refreshOption: false
});
Enables the refresh button.
Explanation: if you want refresh the grid just with another search you can remove the refresh button.

refreshTarget: undefined
refreshTarget
<div id="target">Find:</div>
$('#grid').gridy({
  url: '/gridy',
  refreshTarget: '#target'
});
Enables the refresh button.
Explanation: if you want refresh the grid just with another search you can remove the refresh button.
Result Options
firstQuery: true
firstQuery
$('#grid').gridy({
  url: '/gridy',
  firstQuery: false
});
Choose if the grid will do a first query when loaded on page.
Explanation:
- if you always starts doing a filter before the search, than you can turn off the first query.
- Of course if the options passed to the Gridy is enough, you don't need it
- This options has the objective to avoidd the first request that can bring useless data.

noFirstQueryText: 'No search was performed yet!'
noFirstQueryText
$('#grid').gridy({
  url: '/gridy',
  noFirstQueryText: 'Do your first query!'
});
Message displayed when the first query is blocked.
Explanation: you can choose a good description to tell the user that him must do the first query before show the data.

noResultText: 'No item was found!'
noResultText
$('#grid').gridy({
  url: '/gridy',
  noResultText: 'No result, try again!'
});
Text shown when no result is found for the search.
Explanation: you can tell the user the no result was found, maybe give some tips.

resultOption: true
$('#grid').gridy({
  url: '/gridy',
  resultOption: false
});
Enables the presentation of details of the result.
Explanation: maybe you don't want to show message when there is no result or the first query was not trigger.
Row Options
rows: 10
rows
$('#grid').gridy({
  url: '/gridy',
  rows: 3
});
Number of rows displayed on each page.
Explanation:
- If you has more space on page you can increase this number to show more items.
- With lower number you'll has more pages and less database overload.

rowsNumber: [5, 10, 25, 50, 100]
rowsNumber
$('#grid').gridy({
  url: '/gridy',
  rowsNumber: [10, 100, 1000, 10000]
});
List with the numbers of lines that should be displayed.
Explanation:
- You can choose how many lines can be displayed at once.
- Huge number can be slower, than make sure to keep a good number for pagination.

rowsTarget: undefined
rowsTarget
$('#grid').gridy({
  url: '/gridy',
  rowsTarget: '#target'
});
Selector of the place where the "rows" element will be appended.
Explanation:
- For default the rows box is located on the footer, but you can change the place of it;
- To change the place, just provide a jQuery selector to indicate the new place.
Search Options
search: ''
...&search=wbotelhos%20blog
$('#grid').gridy({
  url: '/gridy',
  search: 'wbotelhos blog'
});
Default term to be consulted.
Explanation:
- Some times you wants the Gridy loads and on the first load do a search, than just provide the term you want;
- Of couser that the term typed on search field will be override this value.

searchButtonLabel: 'search'
searchButtonLabel
$('#grid').gridy({
  url: '/gridy',
  searchButtonLabel: 'go!'
});
Value of the search button.
Explanation: choose an better description to the search button.

searchButtonTitle: 'Start the search'
searchButtonTitle
$('#grid').gridy({
  url: '/gridy',
  searchButtonTitle: 'Click to search'
});
Title of the search button.
Explanation: choose a good explanation about what this button do.

searchFocus: true
searchFocus
$('#grid').gridy({
  url: '/gridy',
  searchFocus: false
});
Enables the automatic focus in the search field.
Explanation:
- Its a good idea keep the focus enable to avoid the user click on field.
- If you have more than one grid on the same screen, maybe you will need choose wich will receives the focus.

searchOption: true
searchOption
$('#grid').gridy({
  url: '/gridy',
  searchOption: false
});
Enables the search field.
Explanation:
- If you need a search over the grid, then just enable this option.
- Even if this options is off, you can set the initials values on Gridy configuration.
- If you need more on field to input search criteria, then use the 'params' and 'paramsElements' to send the values.
- For default we have just this search field, but you can create any you want.

searchTarget: undefined
searchTarget
$('#grid').gridy({
  url: '/gridy',
  searchTarget: '#target'
});
Selector of the place where the "search" element will be appended.
Explanation:
- For default the search box is located on the top of Gridy, but you can change the place of it;
- To change the place, just provide a jQuery selector to indicate the new place.

searchText: ''
searchText
$('#grid').gridy({
  url: '/gridy',
  searchText: 'type your search here...'
});
Text displayed in the search field.
Explanation: you can set a tip text to encourage the user type something on search field.
Status Options
statusOption: true
statusOption
$('#grid').gridy({
  url: '/gridy',
  statusOption: false
});
Enables the status information text.
Explanation: let it on to see how many pages the gridy has, you current page and the total of items.

statusText: 'Displaying {from} - {to} of {total} items'
statusText
$('#grid').gridy({
  url: '/gridy',
  statusText: 'Page: {from} | Total Page: {to} | Total Items: {total}'
});
Enables the status information text.
Explanation:
- The text has three templates that can be used or not;
- {from} you current page;
- {to} the number of the last page;
- {total} the total of item.
Changing the settings globally:
$.fn.catchy.defaults.scroll = true;
$.fn.catchy.defaults.sortOrder = 'desc';
- You can change any option mention the scope $.fn.gridy.defaults. + option_name;
- This setup must be called before you bind the Gridy, of course.
Public functions:
$('#grid').gridy('reload');
Reload the grid with the current filter configuration.
$('#grid').gridy('set', { scroll: true });
Reload the grid setting new configurations.