jTable.org

A JQuery plugin to create AJAX based CRUD tables.

Demos | Documentation | Discussion | Themes | Downloads | About
jTable on GitHub Github

jTable API Reference - General Options

How to set general options

General options can be set either for an instance of jTable or for all jTable instances.

Per instance options are set in jTable initialization code. For example, to disable column resizing option in an initialization code:

<script type="text/javascript">
    $(document).ready(function () {        	
       $('#MyTableContainer').jtable({
            columnResizable: false; //disable column resizing
            //other options...
        });		
    });
</script>

If you want to disable column resizing for all jTable instances, you can use such a code:

<script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js">
<script type="text/javascript">
    $.hik.jtable.prototype.options.columnResizable = false;
</script>

If you want to set more than one option easier, you can extend jTable options:

<script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js">
<script type="text/javascript">
    $.extend(true, $.hik.jtable.prototype.options, {
        columnResizable: false,
        animationsEnabled: false,
        ajaxSettings: {
            type: 'GET'
        }
    });
</script>

Notice that you can set default options just after importing jtable script file. Also, you can override this default setting in every jTable instance.

List of general options

addRecordButton
jQuery object
default: auto-generated link

A jQuery object that can be used instead of the '+ add new record' link. Thus you can set any element on the page to open the 'add new record' dialog.

ajaxSettings
object

An object that defines default options for all ajax requests performed by jTable. See jQuery's $.ajax method for all available options.

Default value for this option is:

ajaxSettings: {
    type: 'POST',
    dataType: 'json'
}

This option overrides default ajaxSetting by extending it. So, if you just want to change type, you can set this option as ajaxSettings: { type: 'GET' }.

animationsEnabled
boolean
default: true

A boolean value indicates that whether jTable shows animations when user creates, updates or deletes a row.

columnResizable
boolean
default: true

A boolean value indicates that whether jTable allows user to resize data columns by dragging.

columnSelectable
boolean
default: true

A boolean value indicates that whether jTable allows user to show/hide data columns by right clicking table header.

defaultDateFormat
string
default: 'yy-mm-dd'

Default format of a date field. See jQueryUI datepicker formats.

defaultSorting
string
default: none

Default sorting of table. It can be a field name of a column of the table. For instance, if you want table sorted by Name by default, defaultSorting can be 'Name ASC' or 'Name DESC'.

deleteConfirmation
boolean or function
default: true

This option can be a boolean value or a function. If it is a boolean value, that indicates whether a confirmation dialog is shown when user clicks delete button/icon for a record.

If this option is a function, It can fully control delete confirmation process. It must be a function as shown below.

deleteConfirmation: function(data) {
    //...
}

data argument has some properties to control confirmation process:

  • row: A jQuery selection for deleting row element.
  • record: Actual deleting record. For example, you can get Name property of record as data.record.Name.
  • cancel: You can set data.cancel to true to cancel delete process (default value is false).
  • cancelMessage: If you cancelled delete process, you can show a message to user that explains cancellation reason. If you don't want to show any message, just don't set it.
  • deleteConfirm: A boolean value indicates whether to show a delete confirmation message or not (default value is true).
  • deleteConfirmMessage: If confirmation enabled, you can set a custom confirmation message.

For example, if you want to show some additional information to user on delete confirmation, you can write a function like that:

deleteConfirmation: function(data) {
    data.deleteConfirmMessage = 'Are you sure to delete person ' + data.record.Name + '?';
}
dialogShowEffect
string
default: 'fade'

jQueryUI effect to be used while opening a jQueryUI dialog. Some options are 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide'... etc. See jQueryUI documentation for all options.

dialogHideEffect
string
default: 'fade'

jQueryUI effect to be used while closing a jQueryUI dialog. Some options are 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide'... etc. See jQueryUI documentation for all options.

gotoPageArea
string
default: 'combobox'

If paging enabled, this value can be used to determine how to show 'go to page' input. Possible values:

  • combobox: Show a combobox (that contains all pages) to allow user to go to desired page.
  • textbox: Show a text box to allow user to go to desired page.
  • none: Does not shows 'go to page' input.
jqueryuiTheme
boolean
default: false

jTable has it's own themes those can be used easily. But, you may want to use color schema and styles of your jQueryUI as jTable's theme. So, this option can be used to declare jTable to use jQueryUI's colors and styles. To do it, set jqueryuiTheme: true in your jTable initialization code and include needed css files to your page as shown below:

<!-- jQueryUI's css file -->
<link href="/Scripts/jqueryUi/themes/redmond/jquery-ui-1.10.1.custom.min.css")" rel="stylesheet" type="text/css" />
<!-- jTable's jQueryUi css file -->
<link href="/Scripts/jtable/themes/jqueryui/jtable_jqueryui.css")" rel="stylesheet" type="text/css" />

jQueryUI has a powerful theme system. You can create your own theme on http://jqueryui.com/themeroller/.

loadingAnimationDelay
int
default: 500

jTable delays 'loading...' animation for a while to allow ajax request to complete. If it does not complete in defined timeout, animation is shown. This option defines this timeout value (as milliseconds). To disable this feature, set 0 to loadingAnimationDelay option.

messages
object

This option used to localize jTable. See localization.

multiselect
boolean
default: false

Indicates that whether jTable allows user to select multiple rows at once.

multiSorting
boolean
default: false

Indicates that whether jTable allows user to sort table according to multiple columns. If this option is set to true, User can perform multiple sorting by holding CTRL key.

If user selects multiple column for sorting, jTable sends column names seperated by comma as like 'Name DESC,BirthDay ASC'. See listAction for more information.

openChildAsAccordion
boolean
default: false

If this options is set to true, jTable automatically closes other open child tables when a child table is opened (accordion style).

paging
boolean
default: false

Indicates that whether jTable uses paging or not. jTable sends additional parameters to server if paging is enabled. See listAction for more information.

pageList
string
default: 'normal'

This option is used to select page list type. Possible values:

  • minimal: Show only first, previous, next and last links.
  • normal: Shows page numbers in addition to 'minimal'.
pageSize
number
default: 10

If paging enabled, this value indicates number of rows in a page. pageSize option can be changed later as like below:

$('#MyTableContainer').jtable('option', 'pageSize', 20);
pageSizes
array of numbers
default: [10, 25, 50, 100, 250, 500]

If paging enabled, this option can be used to determine numbers in 'page size change combobox'. Default values are shown above. You can set an array of any numbers you want.

pageSizeChangeArea
boolean
default: true

If paging enabled, this value can be used to make 'page size change combobox' visible or not.

saveUserPreferences
boolean
default: true

Indicates that whether jTable saves/loads user preferences such as resized columns. Saving/restoring preferences are based on a hashed value that is generated using tableId, all column names and total column count. So, changing columns will change the hash and user preferences are reset.

selecting
boolean
default: false

Indicates that whether jTable allows user to select rows on the table.

selectingCheckboxes
boolean
default: false

Indicates that whether jTable shows checkbox column for selecting.

selectOnRowClick
boolean
default: true

Indicates that whether jTable allows user to select a row by clicking anywhere on the row. This can be set as false to allow user selecting a row only by clicking to the checkbox (see selectingCheckboxes option).

showCloseButton
boolean
default: false

Indicates that whether jTable will show a close button/icon for the table. When user clicks the close button, closeRequested event is raised. This option is used internally by jTable to close child tables.

sorting
boolean
default: false

Indicates that whether jTable will sort the table or not.

tableId
string
default: none

A string that is a unique identifier for this table. This value is used on saving/restoring user preferences. If this is set, it's set to table's (the table tag's) id property. This setting is optional.

title
string
default: none

A string that is shown on top of the table. This is optional, if you don't supply the title option, title area is not displayed at all.

toolbar
object
default: none

This option is used to control jTable toolbar and it's items. By default, only item in toolbar is 'Add new record' item (it's added by jTable if you define createAction). Using this option, you can add custom items.

Default value of this option is shown below:

toolbar: {
	hoverAnimation: true, //Enable/disable small animation on mouse hover to a toolbar item.
	hoverAnimationDuration: 60, //Duration of the hover animation.
	hoverAnimationEasing: undefined, //Easing of the hover animation. Uses jQuery's default animation ('swing') if set to undefined.
	items: [] //Array of your custom toolbar items.
}

Here a sample definition that adds two custom item to toolbar:

toolbar: {
	items: [{
		icon: '/images/excel.png',
		text: 'Export to Excel',
		click: function () {
			//perform your custom job...
		}
	},{
		icon: '/images/pdf.png',
		text: 'Export to Pdf',
		click: function () {
			//perform your custom job...
		}
	}]
},

icon, text and click are optional. But you must define 'icon' or 'text', otherwise jTable can not show the toolbar item. In the click function, you can write your custom javascript codes.

You can also use some additional options for each toolbar item:

  • cssClass: Used to add custom css classes to toolbar item.
  • tooltip: Used to set a tool tip for this item. jTable sets HTML 'title' attribute.
unAuthorizedRequestRedirectUrl
string
default: none

A URL to redirect the page when an ajax request to the server returns with UnAuthorizedRequest = true or HTTP status 401. If this option is not set, jTable refresh the page when server returns UnAuthorizedRequest = true or HTTP status 401.

Advertisement: Professional startup template for ASP.NET MVC & AngularJs by creator of jTable!

ASP.NET Zero screenshot Based on metronic theme, includes pre-built pages like login, register, tenant, role, user, permission and setting management. Learn more...