Jtable Org ApiReference Overview

jTable.
org
A JQuery plugin to create AJAX based CRUD tables.
Demos | Documentation | Discussion | Themes | Downloads | About Follow @jqueryjtable jTable on GitHub
jTable API Reference

Overview General options addRecordButton ajaxSettings animationsEnabled columnResizable columnSelectable defaultDateFormat defaultSorting deleteConfirmation dialogShowEffect dialogHideEffect gotoPageArea jqueryuiTheme loadingAnimationDelay messages multiselect multiSorting openChildAsAccordion
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
paging pageList pageSize pageSizes pageSizeChangeArea saveUserPreferences selecting selectingCheckboxes selectOnRowClick showCloseButton sorting tableId title toolbar Field options columnResizable create edit defaultValue dependsOn display input inputClass inputTitle key list listClass options
pdfcrowd.com
optionsSorting sorting title type visibility width Actions listAction createAction updateAction deleteAction Methods addRecord closeChildRow closeChildTable changeColumnVisibility deleteRecord deleteRows destroy getChildRow getRowByKey isChildRowOpen load openChildRow openChildTable reload selectedRows selectRows
pdfcrowd.com
showCreateForm updateRecord Events closeRequested formClosed formCreated formSubmitting loadingRecords recordAdded recordDeleted recordsLoaded recordUpdated rowInserted rowsRemoved rowUpdated selectionChanged Localization
Overview
jTable is used to develop AJAX based CRUD (Create/Retrive/Update/Delete) tables without coding HTML and JavaScript. Only needed HTML tag is a simple div element in your page: 1 <div id="MyTableContainer"></div>
?
To initialize a jTable instance, you can call jtable method in the ready event of the document as like that: 1 2 3 4 <script type="text/javascript"> $(document).ready(function () { $('#MyTableContainer').jtable({
pdfcrowd.com
4 5 6 7 8 9 10 11 12 13 14 15 16
//General options comes here actions: { //Action definitions comes here }, fields: { //Field definitions comes here }
}); </script>
});
jTable has three types of options: General options: Defines general behavior of the jTable instance. Actions: Defines URLs to perform AJAX calls to the server. Fields: Defines structure of the record, create/edit forms and table. jTable defines an row in the table as 'record'. So, a record must has fields as fields of a relational database table. NOTE: When you create a jTable instance, a table is created but no data is loaded to the table. load method is used to do it. See Getting Started document for detailed usage.
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: 1 2 3 4 <script type="text/javascript"> $(document).ready(function () { $('#MyTableContainer').jtable({ columnResizable: false; //disable column resizing
pdfcrowd.com
4 5 6 7 8
}); </script>
});
columnResizable: false; //disable column resizing //other options...
If you want to disable column resizing for all jTable instances, you can use such a code: 1 2 3 4 <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: 1 2 3 4 5 6 7 8 9 10 <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.
pdfcrowd.com
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: 1 2 3 4 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
pdfcrowd.com
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. 1 2 3 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: 1 2 3
? deleteConfirmation: function(data) { data.deleteConfirmMessage = 'Are you sure to delete person ' + data.record.Name + '?' }
dialogShowEffect
string
default: 'fade'
pdfcrowd.com
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: 1 2 3 4
?  <link href="/Scripts/jqueryUi/themes/redmond/jquery-ui-1.10.1.custom.min.css")" rel="styleshee  <link href="/Scripts/jtable/themes/jqueryui/jtable_jqueryui.css")" rel="stylesheet" type
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,
pdfcrowd.com
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 sotring, 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:

pdfcrowd.com
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: 1 $('#MyTableContainer').jtable('option', 'pageSize', 20); array of numbers default: [10, 25, 50, 100, 250, 500]
?
pageSizes
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.

pdfcrowd.com
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: 1 2
? toolbar: { hoverAnimation: true, //Enable/disable small animation on mouse hover to a toolbar item.
pdfcrowd.com
2 3 4 5 6
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 an items: [] //Array of your custom toolbar items.
Here a sample definition that adds two custom item to toolbar: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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.
Field options
A field definition defines structure and behavior of a field of the record. It's generally formatted as: 1 2 FieldName: { //Field options
pdfcrowd.com
2 3
//Field options
columnResizable
boolean
default: true
A boolean value that indicates whether this column can be resized by user. Table's columnResizable option must be set to true (it's default) to use this option. create boolean default: true
A boolean value that indicates whether this field is shown in the create record form. Default value is false for the key field. True for other fields. edit boolean default: true
A boolean value that indicates whether this field is shown in the edit record form. Default value is false for the key field. True for other fields. defaultValue string default: none
You can set a default value for a field. It must be a valid value. For instance, if the field is an option list, it must be one of these options. dependsOn string or array default: none
This option is used to create cascaded dropdowns. If a combobox field depends on another combobox, jTable can automatically create cascaded dropdowns. See demo for usage. Here, there is a sample usage of this option to provide Country/City cascade comboboxes: 1 2 CountryId: { title: 'Country',
pdfcrowd.com
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
}, CityId: { title: 'City', dependsOn: 'CountryId', //Cities depends on countries. options: function (data) { if (data.source == 'list') { //Return url of all cities for optimization. return 'Demo/GetCityOptions?countryId=0'; }
title: 'Country', options: 'Demo/GetCountryOptions', list: false
//This code runs when user opens edit/create form or changes country combobox on an e return 'Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId;
A field can be depended to more than one field. In this case, you can write fields seperated by comma as dependsOn: 'ContinentalId,CountryId' or as an array like dependsOn: ['ContinentalId', 'CountryId'] See options option for more information. display function default: none
This option is a function that allows you to define a fully custom column for table. jTable directly shows return value of this function on the table. See the sample below: 1 2 3 4 5 6 TestColumn: { title: 'Test', display: function (data) { return '<b>test</b>'; } }
?
This sample Test column returns a bold 'test' string for all rows. You can return any text, html code or jQuery object that will be shown on the table. This method is called for each row. You can get record of the row using data.record. So, if your record has Name property, you can use data.record.Name property to get the Name.
pdfcrowd.com
display function can be used for many purposes such as creating calculated columns, opening child tables for a row... etc. See demos for detailed usage. input function default: none
This option is a function that allows you to define a fully custom input element for create and edit forms. jTable directly shows return value of this function on the form. See the sample below: 1 2 3 4 5 6 7 8 9 10 11 Name: { title: width: input: if
?
'Name', '20%', function (data) { (data.record) { return '<input type="text" name="Name" style="width:200px" value="' + data.record } else { return '<input type="text" name="Name" style="width:200px" value="enter your name }
data argument has some fields those can be used while creating the input: data.formType: Can be 'create' or 'edit' according to the form. data.form: Reference to the form element as jQuery selection. data.record: Gets the editing record if this input is being created for edit form (if formType='edit'). So, it's undefined for 'create' form. data.value: Gets current value of the field. This is default value (if defined) of field for create form, current value of field for edit form. While jTable automatically creates appropriate input element for each field, you can use input option to create custom input elements. Remember to set name attribute of input element if you want to post this field to the server. inputClass string default: none
pdfcrowd.com
A string value that can be set as the class of an input item for this field in create/edit forms. So you can style input elements in the forms for this field. This can be useful when working with validation plug-ins (we will see soon). inputTitle string default: none
This option can be used to show a different title for a field in edit/create forms. If it's not set, input title will be same as title option. key boolean default: false
A boolean value that indicates whether this field is the key (primary key) field of the record. Every record must has one and only one key field that is used on update and delete operations. If a field is marked as key, create and edit options are set to false as default. If a key field is not editable in edit form, a hidden input element is generated for it. Thus, key value is post to server. If the key field is editable (with setting edit option to true), key's original value (the value before update) is post to server as jtRecordKey. list boolean default: true
A boolean value that indicates whether this field is shown in the table. listClass string default: none
A string value that can be set as class/classes of a cell of this field (td element) in the table. Thus, you can stylize fields in the table. options object, array, URL or a function default: none
If this field's value will be selected in an option list (combobox as default, can be radio button list), you must supply a source. An option source can be one of these values:
pdfcrowd.com
object: Property names are values, property values are display texts. array: An array of options. URL: A URL to download the option list for this field. function : A function that takes some arguments and returns an object, an array or a URL string.
Defining an object
This is the simplest way of defining options is creating an object like shown below: 1 2 3 4 PhoneType: { title: 'Phone type', options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' } }
?
Thus, jTable creates a dropdown list in edit/create form for that field:
'1', '2' and '3' are values of combobox items respectively.
Defining an array
You can also define an array of options as shown below: 1 2 3
? PhoneType: { title: 'Phone type', options: [{ Value: '1', DisplayText: 'Home phone' }, { Value: '2', DisplayText: 'Office ph
pdfcrowd.com
3 4
options: [{ Value: '1', DisplayText: 'Home phone' }, { Value: '2', DisplayText: 'Office ph
Also, if values of your options are same as display texts, you can write as shown below: 1 2 3 4 ClassYear: { title: 'Phone type', options: ['1','2','3','4'] }
?
Defining a URL
You can define a URL to download array of options: 1 2 3 4 PhoneType: { title: 'Class year', options: '/Demo/GetPhoneTypes.php' }
?
Your URL must return array of options just like described in the section above. A successfull return value from server is shown below: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {
?
"Result":"OK", "Options":[ { "DisplayText":"Home phone", "Value":"1" }, { "DisplayText":"Office phone", "Value":"2" }, { "DisplayText":"Cell phone", "Value":"3" } ]
pdfcrowd.com
16 17
Result can be "OK" or "ERROR". If it's "ERROR", you can supply a "Message" property to show to the user.
Defining a function
You can define a function that returns an object, an array of a URL dynamically. Thus, you can show different options for specific records. 1 2 3 4 5 6 7 8 9 10 11 12 13 PhoneType: { title: 'Phone type', options: function(data) { if (data.source == 'list') { //Return url all options for optimization. return '/Demo/GetPhoneTypes.php?UserType=0'; } //This code runs when user opens edit/create form to create combobox. //data.source == 'edit' || data.source == 'create' return '/Demo/GetPhoneTypes.php?UserType=' + data.record.UserType;
?
If you return a URL as the sample above, jTable downloads options from returned URL just described in the section above. For optimization, jTable caches all option lists based on URL, and gets options from local cache if you return exactly same URL. You can clear cache if you call data.clearCache() method in your function. IMPORTANT: jTable also uses this function to show the related field in the table for each shown record. This is because your record contains Value of the field, not DisplayText and jTable needs to show display text (instead of value) in the table. So, when data.source=='list', returning different URLs causes more than one download to list records in the table. This may be a major performance problem. So, as shown the sample above, return URL of all options while listing (data.source=='list') and return filtered options in edit/create forms (if you need). data argument has some fields/methods that can be used to determine returning option list:
pdfcrowd.com
data.source: This field is used to know why this method is called. Can be 'list', 'create' or 'edit'. data.clearCache(): This method is used to clear cache for currently returning URL. So, you can ensure that your options will be re-downloaded. data.form: This field is used to get a reference to the create/edit form (as jQuery selection). It's valid if data.source is 'create' or 'edit'. data.record: This field is used to get related record with this function call. So, you can return options according to fields of the record (as shown sample). It's valid if data.source is 'list' or 'edit' data.dependedValues: If you define dependsOn option for this field, you can get current value of depended fields using data.dependedValues. See the sample in dependsOn option. dependsOn option and data.dependedValues work as pair and provide you to create cascade dropdowns. See dependsOn option for sample usage. See demo for complete running example. optionsSorting string default: none
As default, jTable does not sort options and shows in order which you supplied. This option can be used to automatically sort options. Possible values of this option: value: Sorts options according to value (ascending). value-desc: Sorts options according to value (descending). text: Sorts options according to display text (ascending). text-desc: Sorts options according to display text (descending). sorting boolean default: true
Indicates that whether this column will be used to sort the table (If table is sortable). title string default: none
Column header in the table and label in the forms for this field. This option is required if the field is shown on the table or create/edit forms.
pdfcrowd.com
type
string
default: text
Data type for this field. If field is text or number, no need to set type. Other types are: password: Show a password textbox for this field on edit/create forms. textarea: Shows a textarea for this field on edit/create forms. date: A date field (not including time part). A jQueryUI date picker is automatically created for this field on edit/create forms. If a field is date, it can define additional options: displayFormat: Format of date. See jQueryUI datepicker formats. radiobutton : If field is a value from an option list, it can be a combobox (default) or radio button list. If it is a radio button list, set type as radiobutton. You must supply options list for this type. checkbox : To show a checkbox while editing this field. If a field is checkbox, it can define additional options: values: Values for checked/unchecked states. Example: { '0' : 'Passive', '1' : 'Active' }. First value is for unchecked state, second value is for checked state. formText: By default, a checkbox's text changes when user changes the state of the checkbox. If you want to fix the text, you can set the formText option for this field (string). setOnTextClick: By default, when the user clicks the checkbox's text, the state of the checkbox changes. If you do not want that, you can set setOnTextClick to false. hidden : A hidden field can be used hidden fields in edit and create forms. It is not shown on the table. You may want to use defaultValue option with hidden types, thus given default value is automatically set to the hidden field on creating form. See master/child demo for sample usage. visibility string default: 'visible'
A column (related to a field) can be showed or hided by user or this option. Values can be: fixed: This column is always visible and can not be hided by the user. visible: This column is visible as default but can be hided by the user. hidden : This column is hidden as default but can be showed by the user.
pdfcrowd.com
Note: User can open column selection list by right clicking the table header if columnSelectable option is true (it's true as default). width percentage default: '10%'
Width of the column for this field in the table. Can be a percantage value (ex: '30%'). It's required if the field is shown on the table. It's best to complete all shown field widths to 100%. NOTE: jTable is designed to fit it's container element, not for a fixed width. So, all columns will be completed to 100%. If you want to fix table's width, set it's container's width.
Actions
An action defines an URL to perform AJAX call to server. There are four types of action: listAction : A URL address to get the list of records. createAction : A URL address to submit a create new record form. updateAction : A URL address to submit an edit record form. deleteAction : A URL address to delete a record. An action must be defined in actions list of jTable options a like: 1 2 3 4 5 ... actions: { //Actions definitions come here } ... URL string default: none
?
listAction
When you use the load method, jTable makes an AJAX POST call to this URL address to get list of records. This URL must return a JSON object. Here, there is a sample return value for this URL:
pdfcrowd.com
1 2 3 4 5 6 7 8 9
"Result":"OK", "Records":[ {"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"\/Date(1320259705710)\/" {"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"\/Date(1320259705710)\/"}, {"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"\/Date(1320259705710)\/"}, {"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"\/Date(1320259705710)\/"} ]
Result property can be "OK" or "ERROR ". If it is "OK", Records property must be an array of records. If Result is "ERROR", Message property must explain reason of the error to show to the user. Spesifically, a date field (that is transferred between jTable and server side code) must be one of the formats below: "/Date(...)/" Example: /Date(1320259705710)/ (Note: The number inside Date(...) is the milliseconds passed from 01.01.1970) "YYYY-MM-DD HH:MM:SS" Example: 2012-01-03 21:40:42 "YYYY-MM-DD" Example: 2012-01-03 Click here to see sample server side codes in ASP.NET MVC, ASP.NET and PHP for listAction .
Paging
If paging is enabled, jTable sends two query string parameters to the server on listAction AJAX call: jtStartIndex : Start index of records for current page. jtPageSize: Count of maximum expected records. Also, one additional information is expected from server: TotalRecordCount: Total count of records (not only this page).
pdfcrowd.com
Sorting
If sorting is enabled, jTable sends one additional query string parameter to the server on listAction AJAX call: jtSorting: A string represents requested sorting. It is built from sorting field name plus sorting direction. For instance, It can be 'Name ASC ', 'BirtDate DESC ', 'Age ASC ' or can be 'CityId DESC,Name ASC ' if multiSotring is enabled.. Click here to see sample server side codes in ASP.NET MVC, ASP.NET and PHP for paged and sorted listAction . createAction URL string default: none
When you create and save a record, jTable makes an AJAX POST call to this URL address to save the record to the server. createAction is optional. If it is not defined, user can not add new records to the table. This URL must return a JSON object. Here, there is a sample return value for this URL: 1 2 3 4 { }
?
"Result":"OK", "Record":{"PersonId":5,"Name":"Dan Brown","Age":55,"RecordDate":"\/Date(1320262185197)\/"
Result property can be "OK" or "ERROR ". If it is "OK", Record property must be the newly created record. This is needed by jTable to add record to the table. If Result is "ERROR", Message property must explain reason of the error to show to the user. Click here to see sample server side codes in ASP.NET MVC, ASP.NET and PHP for createAction . updateAction URL string default: none
When you edit and save a record, jTable makes an AJAX POST call to this URL address to update record on the server. updateAction is optional. If it is not defined, edit image (button) is not shown. This URL must return a JSON object. Here, there is a sample return value for this URL: 1 {"Result":"OK"}
pdfcrowd.com
Result property can be "OK" or "ERROR ". If Result is "ERROR", Message property must explain reason of the error to show to the user. updateAction can also return a Record value (optional). This record is overwriten to updating record in the table. It's not completely replaced, overwritten field by field. So, for instance, if you return a record with just a single field, only this field is overwritten. 1 2 3 4 { }
?
"Result":"OK", "Record":{"Name":"Dan Brown","Age":55,"LastUpdateDate":"\/Date(1320262185197)\/"}
Click here to see sample server side codes in ASP.NET MVC, ASP.NET and PHP for updateAction . deleteAction URL string default: none
When you delete a record, jTable makes an AJAX POST call to this URL address to delete the record on the server. deleteAction is optional. If it is not defined, delete image (button) is not shown. This URL must return a JSON object. Here, there is a sample return value for this URL: 1 {"Result":"OK"}
?
Result property can be "OK" or "ERROR ". If Result is "ERROR", Message property must explain reason of the error to show to the user. Click here to see sample server side codes in ASP.NET MVC, ASP.NET and PHP for deleteAction .
Methods
addRecord(options) This method is used to add a new record to the table programmatically. Parameters are:
pdfcrowd.com
record: The record object that will be added to the table. This option is required. clientOnly (boolean, default: false): If this is true, jTable does not add record to the server, only adds to the table. animationsEnabled (boolean, default: behaviour of the table (it's true as default)): If this is false, no animation is shown while creating a new record on the table. url (string, default: createAction of the table): You can supply different URL to create the new record on the server. success (function, default: none): A callback function that can be used to be notified when record is successfully added to the table. error (function, default: none): A callback function that can be used to be notified if any error occurs during adding of the new record. Here, the simplest usage of addRecord method: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('#StudentTableContainer').jtable('addRecord', { record: { Name: 'Halil ibrahim Kalkan', EmailAddress: 'halil@jtable.org', Password: '123', Gender: 'M', CityId: 4, BirthDate: '2002-11-18', Education: '2', About: 'adding test record', IsActive: true, RecordDate: '2011-11-12' } });
?
closeChildRow(row) This method is used to close an open child row for a table row. See openChildRow method. (This method is internally used by jTable to close child tables.) closeChildTable(row, closed)
pdfcrowd.com
This method is used to close an open child table for a table row. row is a jQuery row object on the table. closed is a callback function that is called when child table is closed. See openChildTable method. changeColumnVisibility(columnName, visibility) This method is used to change visibility property of a column. Values can be fixed (column is shown always), visible (column is shown as default) and hidden (column is hidden as default). See field visibility option. deleteRecord(options) This method is used to delete an existing record from the table programmatically. Parameters are: key: The key (Id) of the record to update. This option is required. clientOnly (boolean, default: false): If this is true, jTable does not delete record from the server, only deletes from the table. animationsEnabled (boolean, default: behaviour of the table (it's true as default)): If this is false, no animation is shown while deleting the record from the table. url (string, default: deleteAction of the table): You can supply different URL to delete the record on the server. success (function, default: none): A callback function that can be used to be notified when record is successfully deleted. error (function, default: none): A callback function that can be used to be notified if any error occurs during deleting of the record. Here, the simplest usage of deleteRecord method: 1 2 3 $('#StudentTableContainer').jtable('deleteRecord', { key: 42 });
?
deleteRows(rows) Deletes given rows from server and table. rows parameter must be a jQuery selection. This method can be combined with
pdfcrowd.com
selectedRows method. Thus, you can get selected rows and pass to deleteRows method to delete them. destroy() Compeletely removes table from it's container. getChildRow(row) This method is used to get child row for a table row. Thus, you can add content to the child row. See openChildRow method. getRowByKey(key) This method is used to get related row (jQuery selection) of a record by key field's value of the record. isChildRowOpen(row) This method returns true if child row is open for specified row. See openChildRow method. load(postData, completeCallback) Loads records from the server. All parameters are optional. If you want to pass some parameters to the server, you can pass them in the postData parameter while calling the load method, like this: 1 $('#PersonTable').jtable('load', { CityId: 2, Name: 'Halil' });
?
You can get people who are living in city 2 and whose name is Halil like shown above. Surely, you must handle these parameters in the server side. Also, you can pass a callback method as completeCallback, that is called when loading of data is successfully completed. openChildRow(row) This method is used to open child row for a table row. Child rows generally used to show child tables. If you want to show child
pdfcrowd.com
tables, you don't need to use this method, use openChildTable method instead. If you want to open a custom child row, use this method. It returns the opened child row. Thus, you can fill it with a custom content. A child row is related to a specific data row in the table (which is passed as row agrument). If the data row is removed from table, it's child is also automatically removed. openChildTable(row, tableOptions, opened) This method is used to create and open a child table for a data row (See demos page). row argument is a data row on the table, tableOptions are standard jTable options that is used to initialize child table. opened is a callback that is called by jTable when the child table is shown (After opening animation is finished). Click here to see a sample usage. reload(completeCallback) Re-loads records from server with last postData. This method can be used to refresh table data from server since it does not change current page, sorting and uses last postData (on load call). Also, you can pass a callback method as completeCallback, that is called when loading of data is successfully completed. selectedRows() Gets all selected rows on the table as jQuery selection. See the sample below: 1 2 3 4 5 6 var $selectedRows = $('#PersonTable').jtable('selectedRows'); $selectedRows.each(function () { var record = $(this).data('record'); var personId = record.PersonId; var name = record.Name; });
?
Here, we get all selected rows, then iterate over rows and get the record related to the row, then get some fields of the record (See demos for more).
open in browser PRO version pdfcrowd.com
selectRows(rows) This method is used to select one or more rows on the table. rows parameter must be a jQuery selection. showCreateForm() Can be used to programmatically open a 'create new record' form dialog. updateRecord(options) This method is used to update an existing record on the table programmatically. Parameters are: record: The record object that will be updated. record's key value must match a value on the table. Otherwise, no record is updated. This option is required. clientOnly (boolean, default: false): If this is true, jTable does not update record on the server, only updates on the table. animationsEnabled (boolean, default: behaviour of the table (it's true as default)): If this is false, no animation is shown while updating the record on the table. url (string, default: updateAction of the table): You can supply different URL to update the record on the server. success (function, default: none): A callback function that can be used to be notified when record is successfully updated. error (function, default: none): A callback function that can be used to be notified if any error occurs during updating of the record. Here, the simplest usage of updateRecord method: 1 2 3 4 5 6 7 $('#StudentTableContainer').jtable('updateRecord', { record: { StudentId: 42, Name: 'Halil Kalkan', EmailAddress: 'halil@jtable.org', Password: '123456', Gender: 'M',
pdfcrowd.com
7 8 9 10 11 12 13 14 15
});
Gender: 'M', CityId: 4, BirthDate: '2001-11-18', Education: '3', About: 'updated this record', IsActive: true, RecordDate: '2012-01-05'
Events
closeRequested(event, data) This event is raised when user clicks close button/icon of the table. Close button is shown if showCloseButton is set to true. This event has no argument. formClosed(event, data) This event is raised when an edit or create form dialog is closed. data argument has some fields: data.form: Gets the form as jQuery selection. data.formType: Can be 'edit' or 'create' according to the form. data.row: Gets the edited row if the form is 'edit' form. formCreated(event, data) This event is raised when an edit or create form is created for a record. data argument has some fields: data.form: Gets the form as jQuery selection. data.formType: Can be 'edit' or 'create' according to the form. data.record: Gets the edited record if the form is 'edit' form (for example, you can get the name field of the editing record as data.record.Name). data.row: Gets the edited row if the form is 'edit' form.
pdfcrowd.com
formSubmitting(event, data) This event is raised when save/submit button is clicked for a create or edit form. data argument has some fields: data.form: Gets the form as jQuery selection. data.formType: Can be 'edit' or 'create' according to the form. data.row: Gets the edited row if the form is 'edit' form. You can validate the form on this event. If you return false from this event callback, submit operation is cancelled. loadingRecords(event, data) This event is raised just before AJAX request to load records from server. It has no arguments. recordAdded(event, data) This event is raised when user successfully creates and saves a new record. You can get the added record using data.record argument. You can get the response JSON object returned from server as data.serverResponse. recordDeleted(event, data) This event is raised when user successfully deletes a record. You can get the deleted record using data.record argument. You can get the deleted table row by data.row argument. You can get the response JSON object returned from server as data.serverResponse. recordsLoaded(event, data) This event is raised when jTable loads records from server and refreshes the table (If paging enabled, this event is also raised when user changes the current page). You can get all records loaded from server by data.records argument. You can get the response JSON object returned from server as data.serverResponse.
pdfcrowd.com
recordUpdated(event, data) This event is raised when user successfully updates a record. You can get the updated record using data.record argument. You can get the updated table row by data.row argument. You can get the response JSON object returned from server as data.serverResponse. rowInserted(event, data) This event is raised when a row is inserted to the shown table. A new row can be inserted either when user added a new record or records loaded from server. When records loaded from server, rowInserted event is called for each row. So, you can modify row or do whatever you need. You can get the row using data.row, you can get related record with data.record. Finally, if this is a new record (that's added by user) data.isNewRow is set to true by jTable. rowsRemoved(event, data) This event is raised when either user deletes row/rows (actual record deletion from server) or during re-loading records from server (all rows cleared but not deleted from server). You can get all removed rows by data.rows as jQuery selection. You can get remove reason by data.reason (can be 'deleted' or 'reloading'). rowUpdated(event, data) This event is raised when a row updated. A row is updated when user updates a record. You can get the updated row using data.row, you can get related record with data.record. This event is raised after recordUpdated. selectionChanged(event, data) This event is raised when selected rows on the table changes in anyway. It may change when user selects/deselects a row, a selected row is deleted, page changed while some rows are selected... etc. You can get selected rows by selectedRows method.
Localization
jTable can be easily localized either using ready localization files or writing your custom localized messages.
pdfcrowd.com
jTable can be easily localized either using ready localization files or writing your custom localized messages.
With localization files

You can easily localize jTables on your site by adding a localization script in the localization folder of the library, just after the jtable script file: 1 2
? <script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js"> <script type="text/javascript" src="/Scripts/jtable/localization/jquery.jtable.tr.js">
Turkish (tr) localization is shown above. You can also write your own localization script files.
With custom localized messages

You can use the messages option to localize a jTable instance on initialization. Default value of the messages option is shown below: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 messages: { serverCommunicationError: 'An error occured while communicating to the server.', loadingMessage: 'Loading records...', noDataAvailable: 'No data available!', addNewRecord: 'Add new record', editRecord: 'Edit Record', areYouSure: 'Are you sure?', deleteConfirmation: 'This record will be deleted. Are you sure?', save: 'Save', saving: 'Saving', cancel: 'Cancel', deleteText: 'Delete', deleting: 'Deleting', error: 'Error', close: 'Close', cannotLoadOptionsFor: 'Can not load options for field {0}', pagingInfo: 'Showing {0}-{1} of {2}', pageSizeChangeLabel: 'Row count', gotoPageLabel: 'Go to page', canNotDeletedRecords: 'Can not deleted {0} of {1} records!', deleteProggress: 'Deleted {0} of {1} records, processing...'
pdfcrowd.com
21 22
deleteProggress: 'Deleted {0} of {1} records, processing...'
Here, a sample localization for Turkish language: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 //Localization var turkishMessages = { serverCommunicationError: 'Sunucu ile iletiim kurulurken bir hata olutu.', loadingMessage: 'Kaytlar ykleniyor...', noDataAvailable: 'Hi kayt bulunmamaktadr!', addNewRecord: 'Yeni kayt ekle', editRecord: 'Kayt dzenle', areYouSure: 'Emin misiniz?', deleteConfirmation: 'Bu kayt silinecektir. Emin misiniz?', save: 'Kaydet', saving: 'Kaydediyor', cancel: 'ptal', deleteText: 'Sil', deleting: 'Siliyor', error: 'Hata', close: 'Kapat', cannotLoadOptionsFor: '{0} alan iin seenekler yklenemedi!', pagingInfo: 'Grterilen: {0}-{1}, Toplam: {2}', pageSizeChangeLabel: 'Satr says', gotoPageLabel: 'Sayfaya git', canNotDeletedRecords: '{1} kayttan {0} adedi silinemedi!', deleteProggress: '{1} kayttan {0} adedi silindi, devam ediliyor...' };
?
To set localized messages for a jTable instance (in jTable initialization): 1 2 3 4 //Prepare jtable plugin $('#PersonTable').jtable({ messages: turkishMessages, });
?
To set localized messages for all jTable instances of your web site: 1 $.extend(true, $.hik.jtable.prototype.options.messages, turkishMessages);
pdfcrowd.com
See How to set general options to get detailed information about setting general options for jTable. Designed and developed by Halil brahim Kalkan 2011 - 2013
pdfcrowd.com

Jtable Org ApiReference Overview

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Jtable Org ApiReference Overview

Enviado por

Direitos autorais:

Formatos disponíveis

jTable.

jTable API Reference

open in browser PRO version

open in browser PRO version

columnResizable: false; //disable column resizing //other options...

List of general options

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

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

Are you a developer? Try out the HTML to PDF API

Are you a developer? Try out the HTML to PDF API

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

Indicates that whether jTable shows checkbox column for selecting.

open in browser PRO version

open in browser PRO version

open in browser PRO version

title: 'Country', options: 'Demo/GetCountryOptions', list: false

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

'1', '2' and '3' are values of combobox items respectively.

open in browser PRO version

open in browser PRO version

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

"Result":"OK", "Record":{"PersonId":5,"Name":"Dan Brown","Age":55,"RecordDate":"\/Date(1320262185197)\/"

open in browser PRO version

"Result":"OK", "Record":{"Name":"Dan Brown","Age":55,"LastUpdateDate":"\/Date(1320262185197)\/"}

Are you a developer? Try out the HTML to PDF API

open in browser PRO version

With localization files

With custom localized messages

open in browser PRO version

deleteProggress: 'Deleted {0} of {1} records, processing...'

open in browser PRO version

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Você também pode gostar