Jtable Org ApiReference Overview

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

jTable API ReferenceOverviewGeneral options

addRecordButtonajaxSettingsanimationsEnabledcolumnResizablecolumnSelectabledefaultDateFormatdefaultSortingdeleteConfirmationdialogShowEffectdialogHideEffectgotoPageAreajqueryuiThemeloadingAnimationDelaymessagesmultiselectmultiSortingopenChildAsAccordion

jTable.orgA JQuery plugin to create AJAX based CRUD tables. Follow @jqueryjtable

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

https://github.com/hikalkan/jtable

http://jtable.org/Home/About

http://jtable.org/Home/Downloads

http://jtable.org/Themes

https://github.com/hikalkan/jtable/issues?state=open

http://jtable.org/Home/Documents

http://jtable.org/Demo

https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fjtable.org%2FApiReference&region=follow_link&screen_name=jqueryjtable&tw_p=followbutton&variant=2.0

http://jtable.org/Donate

http://jtable.org/

http://pdfcrowd.com/html-to-pdf-api/?ref=pdf

http://pdfcrowd.com/customize/

http://pdfcrowd.com/redirect/?url=http%3a%2f%2fjtable.org%2fApiReference%23Overview&id=ma-130429045457-60ac3652

http://pdfcrowd.com


pagingpageListpageSizepageSizespageSizeChangeAreasaveUserPreferencesselectingselectingCheckboxesselectOnRowClickshowCloseButtonsortingtableIdtitletoolbar

Field options

columnResizablecreateeditdefaultValuedependsOndisplayinputinputClassinputTitlekeylistlistClassoptions




http://pdfcrowd.com


optionsSortingsortingtitletypevisibilitywidth

Actions

listActioncreateActionupdateActiondeleteAction

Methods

addRecordcloseChildRowcloseChildTablechangeColumnVisibilitydeleteRecorddeleteRowsdestroygetChildRowgetRowByKeyisChildRowOpenloadopenChildRowopenChildTablereloadselectedRowsselectRows




http://pdfcrowd.com


showCreateFormupdateRecord

Events

closeRequestedformClosedformCreatedformSubmittingloadingRecordsrecordAddedrecordDeletedrecordsLoadedrecordUpdatedrowInsertedrowsRemovedrowUpdatedselectionChanged

Localization

OverviewjTable 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:

To initialize a jTable instance, you can call jtable method in the ready event of the document as like that:

1 <div id="MyTableContainer"></div>

1234

<script type="text/javascript"> $(document).ready(function () { $('#MyTableContainer').jtable({

?

?




http://pdfcrowd.com


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, arecord 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 initializationcode:

456789

10111213141516

//General options comes here actions: { //Action definitions comes here }, fields: { //Field definitions comes here } }); });</script>

1234

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

?

http://jtable.org/GettingStarted




http://pdfcrowd.com


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

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

Notice that you can set default options just after importing jtable script file. Also, you can override this default setting in everyjTable 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.

45678

columnResizable: false; //disable column resizing //other options... }); });</script>

1234

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

123456789

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>

?

?




http://pdfcrowd.com


ajaxSettings object

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

Default value for this option is:

This option overrides default ajaxSetting by extending it. So, if you just want to change type, you can set this option asajaxSettings: { 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

1234

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

?

http://docs.jquery.com/UI/Datepicker/formatDate

http://api.jquery.com/jQuery.ajax/




http://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 bydefault, 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 isshown 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.

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. Ifyou 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 istrue).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 likethat:

dialogShowEffect string default: 'fade'

123

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

123

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

?

?




http://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 asjTable'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 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,

1234

<link href="/Scripts/jqueryUi/themes/redmond/jquery-ui-1.10.1.custom.min.css")" rel="stylesheet"<link href="/Scripts/jtable/themes/jqueryui/jtable_jqueryui.css")" rel="stylesheet" type

?

http://jqueryui.com/themeroller/

http://www.jqueryui.com/demos/effect

http://www.jqueryui.com/demos/effect




http://pdfcrowd.com


animation is shown. This option defines this timeout value (as milliseconds). To disable this feature, set 0 toloadingAnimationDelay 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 canperform 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. SeelistAction for more information.

pageList string default: 'normal'

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




http://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:

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 shownabove. 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 basedon a hashed value that is generated using tableId, all column names and total column count. So, changing columns will changethe 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.

1 $('#MyTableContainer').jtable('option', 'pageSize', 20); ?




http://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 userselecting 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, closeRequestedevent 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 totable'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 addedby jTable if you define createAction). Using this option, you can add custom items.

Default value of this option is shown below:

12

toolbar: { hoverAnimation: true, //Enable/disable small animation on mouse hover to a toolbar item.

?




http://pdfcrowd.com


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

icon, text and click are optional. But you must define 'icon' or 'text', otherwise jTable can not show the toolbar item. In theclick 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 optionsA field definition defines structure and behavior of a field of the record. It's generally formatted as:

23456

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.}

123456789

101112131415

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... } }]},

12

FieldName: { //Field options

?

?




http://pdfcrowd.com


columnResizable boolean default: true

A boolean value that indicates whether this column can be resized by user. Table's columnResizable option must be set totrue (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 theseoptions.

dependsOn string or array default: none

This option is used to create cascaded dropdowns. If a combobox field depends on another combobox, jTable canautomatically create cascaded dropdowns. See demo for usage.

Here, there is a sample usage of this option to provide Country/City cascade comboboxes:

23

//Field options}

12

CountryId: { title: 'Country',

?

http://jtable.org/Demo/CascadeDropDown




http://pdfcrowd.com


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 thisfunction on the table. See the sample below:

This sample Test column returns a bold 'test' string for all rows. You can return any text, html code or jQuery object that willbe shown on the table. This method is called for each row. You can get record of the row using data.record. So, if your recordhas Name property, you can use data.record.Name property to get the Name.

23456789

101112131415161718

title: 'Country', options: 'Demo/GetCountryOptions', list: false},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'; } //This code runs when user opens edit/create form or changes country combobox on an edit/create form. return 'Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId; }}

123456

TestColumn: { title: 'Test', display: function (data) { return '<b>test</b>'; }}

?




http://pdfcrowd.com


display function can be used for many purposes such as creating calculated columns, opening child tables for a row... etc. Seedemos 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 showsreturn value of this function on the form. See the sample below:

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 fieldfor edit form.

While jTable automatically creates appropriate input element for each field, you can use input option to create custom inputelements. Remember to set name attribute of input element if you want to post this field to the server.

inputClass string default: none

123456789

1011

Name: { title: 'Name', width: '20%', input: function (data) { if (data.record) { return '<input type="text" name="Name" style="width:200px" value="' + data.record.Name + } else { return '<input type="text" name="Name" style="width:200px" value="enter your name here" />' } }}

?




http://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 inthe 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 titleoption.

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 andonly 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 keyfield is editable (with setting edit option to true), key's original value (the value before update) is post to server asjtRecordKey.

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 thetable.

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:




http://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:

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:

1234

PhoneType: { title: 'Phone type', options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }}

123

PhoneType: { title: 'Phone type', options: [{ Value: '1', DisplayText: 'Home phone' }, { Value: '2', DisplayText: 'Office phone'

?

?




http://pdfcrowd.com


Also, if values of your options are same as display texts, you can write as shown below:

Defining a URL

You can define a URL to download array of options:

Your URL must return array of options just like described in the section above. A successfull return value from server is shownbelow:

34

options: [{ Value: '1', DisplayText: 'Home phone' }, { Value: '2', DisplayText: 'Office phone'}

1234

ClassYear: { title: 'Phone type', options: ['1','2','3','4']}

1234

PhoneType: { title: 'Class year', options: '/Demo/GetPhoneTypes.php'}

123456789

10111213141516

{ "Result":"OK", "Options":[ { "DisplayText":"Home phone", "Value":"1" }, { "DisplayText":"Office phone", "Value":"2" }, { "DisplayText":"Cell phone", "Value":"3" } ]

?

?

?




http://pdfcrowd.com


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 forspecific records.

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 sameURL. 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 yourrecord 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 amajor performance problem. So, as shown the sample above, return URL of all options while listing (data.source=='list') andreturn filtered options in edit/create forms (if you need).

data argument has some fields/methods that can be used to determine returning option list:

1617

]}

123456789

10111213

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; }}

?




http://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 youroptions 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 tofields 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 fieldsusing data.dependedValues. See the sample in dependsOn option.

dependsOn option and data.dependedValues work as pair and provide you to create cascade dropdowns. See dependsOnoption 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 sortoptions. 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 orcreate/edit forms.

http://jtable.org/Demo/CascadeDropDown




http://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/createforms. 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 radiobutton 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 uncheckedstate, 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 fixthe 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 donot 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 touse defaultValue option with hidden types, thus given default value is automatically set to the hidden field on creatingform. 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.

http://jtable.org/Demo/MasterChild

http://docs.jquery.com/UI/Datepicker/formatDate




http://pdfcrowd.com


Note: User can open column selection list by right clicking the table header if columnSelectable option is true (it's true asdefault).

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 thetable. 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 youwant to fix table's width, set it's container's width.

ActionsAn 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:

listAction URL string default: none

When you use the load method, jTable makes an AJAX POST call to this URL address to get list of records. This URL mustreturn a JSON object. Here, there is a sample return value for this URL:

12345

...actions: { //Actions definitions come here}...

?




http://pdfcrowd.com


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).

123456789

{ "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)\/"} ]}

?




http://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, Itcan 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:

Result property can be "OK" or "ERROR". If it is "OK", Record property must be the newly created record. This is needed byjTable 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:

1234

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

1 {"Result":"OK"}

?

?




http://pdfcrowd.com


Result property can be "OK" or "ERROR". If Result is "ERROR", Message property must explain reason of the error to show tothe user.

updateAction can also return a Record value (optional). This record is overwriten to updating record in the table. It's notcompletely replaced, overwritten field by field. So, for instance, if you return a record with just a single field, only this field isoverwritten.

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:

Result property can be "OK" or "ERROR". If Result is "ERROR", Message property must explain reason of the error to show tothe 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:

1234

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

1 {"Result":"OK"}

?

?




http://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 isshown 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 addedto the table.error (function, default: none): A callback function that can be used to be notified if any error occurs during adding ofthe new record.

Here, the simplest usage of addRecord method:

closeChildRow(row)

This method is used to close an open child row for a table row. See openChildRow method. (This method is internally used byjTable to close child tables.)

closeChildTable(row, closed)

123456789

1011121314

$('#StudentTableContainer').jtable('addRecord', { record: { Name: 'Halil ibrahim Kalkan', EmailAddress: '[email protected]', Password: '123', Gender: 'M', CityId: 4, BirthDate: '2002-11-18', Education: '2', About: 'adding test record', IsActive: true, RecordDate: '2011-11-12' }});

?




http://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 callbackfunction 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 (columnis 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 thetable.animationsEnabled (boolean, default: behaviour of the table (it's true as default)): If this is false, no animation isshown 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 successfullydeleted.error (function, default: none): A callback function that can be used to be notified if any error occurs during deleting ofthe record.

Here, the simplest usage of deleteRecord method:

deleteRows(rows)

Deletes given rows from server and table. rows parameter must be a jQuery selection. This method can be combined with

123

$('#StudentTableContainer').jtable('deleteRecord', { key: 42});

?




http://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 passthem in the postData parameter while calling the load method, like this:

You can get people who are living in city 2 and whose name is Halil like shown above. Surely, you must handle theseparameters in the server side. Also, you can pass a callback method as completeCallback, that is called when loading of datais 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

1 $('#PersonTable').jtable('load', { CityId: 2, Name: 'Halil' }); ?




http://pdfcrowd.com


tables, you don't need to use this method, use openChildTable method instead. If you want to open a custom child row, usethis method. It returns the opened child row. Thus, you can fill it with a custom content. A child row is related to a specific datarow in the table (which is passed as row agrument). If the data row is removed from table, it's child is also automaticallyremoved.

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 thetable, tableOptions are standard jTable options that is used to initialize child table. opened is a callback that is called byjTable 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 notchange current page, sorting and uses last postData (on load call). Also, you can pass a callback method ascompleteCallback, 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:

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).

123456

var $selectedRows = $('#PersonTable').jtable('selectedRows');$selectedRows.each(function () { var record = $(this).data('record'); var personId = record.PersonId; var name = record.Name;});

?




http://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, norecord 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 thetable.animationsEnabled (boolean, default: behaviour of the table (it's true as default)): If this is false, no animation isshown 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 successfullyupdated.error (function, default: none): A callback function that can be used to be notified if any error occurs during updating ofthe record.

Here, the simplest usage of updateRecord method:

1234567

$('#StudentTableContainer').jtable('updateRecord', { record: { StudentId: 42, Name: 'Halil Kalkan', EmailAddress: '[email protected]', Password: '123456', Gender: 'M',

?




http://pdfcrowd.com


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 editingrecord as data.record.Name).data.row: Gets the edited row if the form is 'edit' form.

789

101112131415

Gender: 'M', CityId: 4, BirthDate: '2001-11-18', Education: '3', About: 'updated this record', IsActive: true, RecordDate: '2012-01-05' }});




http://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.recordargument. 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. Youcan get the deleted table row by data.row argument. You can get the response JSON object returned from server asdata.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 raisedwhen user changes the current page). You can get all records loaded from server by data.records argument. You can get theresponse JSON object returned from server as data.serverResponse.




http://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 asdata.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 newrecord or records loaded from server. When records loaded from server, rowInserted event is called for each row. So, you canmodify 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 fromserver (all rows cleared but not deleted from server). You can get all removed rows by data.rows as jQuery selection. You canget 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 usingdata.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, aselected row is deleted, page changed while some rows are selected... etc. You can get selected rows by selectedRows method.

LocalizationjTable can be easily localized either using ready localization files or writing your custom localized messages.




http://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 thejtable script file:

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 shownbelow:

12

<script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js"><script type="text/javascript" src="/Scripts/jtable/localization/jquery.jtable.tr.js">

123456789

101112131415161718192021

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...'

?

?




http://pdfcrowd.com


Here, a sample localization for Turkish language:

To set localized messages for a jTable instance (in jTable initialization):

To set localized messages for all jTable instances of your web site:

2122

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

123456789

1011121314151617181920212223

//Localizationvar turkishMessages = { serverCommunicationError: 'Sunucu ile iletişim kurulurken bir hata oluştu.', loadingMessage: 'Kayıtlar yükleniyor...', noDataAvailable: 'Hiç kayıt bulunmamaktadır!', addNewRecord: 'Yeni kayıt ekle', editRecord: 'Kayıt düzenle', areYouSure: 'Emin misiniz?', deleteConfirmation: 'Bu kayıt silinecektir. Emin misiniz?', save: 'Kaydet', saving: 'Kaydediyor', cancel: 'İptal', deleteText: 'Sil', deleting: 'Siliyor', error: 'Hata', close: 'Kapat', cannotLoadOptionsFor: '{0} alanı için seçenekler yüklenemedi!', pagingInfo: 'Görterilen: {0}-{1}, Toplam: {2}', pageSizeChangeLabel: 'Satır sayısı', gotoPageLabel: 'Sayfaya git', canNotDeletedRecords: '{1} kayıttan {0} adedi silinemedi!', deleteProggress: '{1} kayıttan {0} adedi silindi, devam ediliyor...'};

1234

//Prepare jtable plugin$('#PersonTable').jtable({ messages: turkishMessages,});

1 $.extend(true, $.hik.jtable.prototype.options.messages, turkishMessages);

?

?

?




http://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

http://www.halilibrahimkalkan.com/




http://pdfcrowd.com