< Return to jQuery Samples page
JJDataGrid() jQuery Plug-in examples
Check out the following examples of the different options that can be used with the JJDataGrid() plugin to enhance the functionality of a table. Refer to the documentation for more detailed information.
JJDataGrid() Example 1:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
Set width and height of the outer container:
containerWidth: 500
containerHeight: 150
Set default widths for each of the columns: colWidths: [120, 80, 160, 100]
Make columns non-resizable: resizeColumns: false
containerHeight: 150
Set default widths for each of the columns: colWidths: [120, 80, 160, 100]
Make columns non-resizable: resizeColumns: false
JJDataGrid() Example 2:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
Set width and height of the outer container:
containerWidth: 500
containerHeight: 150
Set a default width for each of the columns if no value is provided in the colWidths array option: defaultColWidth: 80
Make columns resizable: resizeColumns: true
containerHeight: 150
Set a default width for each of the columns if no value is provided in the colWidths array option: defaultColWidth: 80
Make columns resizable: resizeColumns: true
JJDataGrid() Example 3:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
Set default options:
containerWidth: 500
containerHeight: 150
resizeColumns: true
Make the rows selectable and toggle the selection on/off each time the row is clicked: selectRows: true
toggleSelect: true
containerHeight: 150
resizeColumns: true
Make the rows selectable and toggle the selection on/off each time the row is clicked: selectRows: true
toggleSelect: true
JJDataGrid() Example 4:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
Set default options:
containerWidth: 500
containerHeight: 150
resizeColumns: true
Make the rows selectable and keep the row selected
until a new row is clicked: selectRows: true
toggleSelect: false
Define a function to envoke when a cell is clicked:
The obj parameter is a reference to the contents of the cell that is clicked. JJDataGridContentClick: function(obj) {
alert($(obj).text());
}
containerHeight: 150
resizeColumns: true
Make the rows selectable and keep the row selected
until a new row is clicked: selectRows: true
toggleSelect: false
Define a function to envoke when a cell is clicked:
The obj parameter is a reference to the contents of the cell that is clicked. JJDataGridContentClick: function(obj) {
alert($(obj).text());
}