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.
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.
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' }.
A boolean value indicates that whether jTable shows animations when user creates, updates or deletes a row.
A boolean value indicates that whether jTable allows user to resize data columns by dragging.
A boolean value indicates that whether jTable allows user to show/hide data columns by right clicking table header.
Default format of a date field. See jQueryUI datepicker formats.
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'.
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:
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 + '?'; }
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.
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.
If paging enabled, this value can be used to determine how to show 'go to page' input. Possible values:
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/.
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.
This option used to localize jTable. See localization.
Indicates that whether jTable allows user to select multiple rows at once.
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.
If this options is set to true, jTable automatically closes other open child tables when a child table is opened (accordion style).
Indicates that whether jTable uses paging or not. jTable sends additional parameters to server if paging is enabled. See listAction for more information.
This option is used to select page list type. Possible values:
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);
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.
If paging enabled, this value can be used to make 'page size change combobox' visible or not.
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.
Indicates that whether jTable allows user to select rows on the table.
Indicates that whether jTable shows checkbox column for selecting.
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).
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.
Indicates that whether jTable will sort the table or not.
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.
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.
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:
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!
Based on metronic theme, includes pre-built pages like login, register, tenant, role, user, permission and setting management. Learn more...