jTable.org

This method is used to add a new record to the table programmatically. Parameters are:

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

$('#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'
	}
});

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

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.

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.

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:

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

Deletes given rows from server and table. rows parameter must be a jQuery selection. This method can be combined with selectedRows method. Thus, you can get selected rows and pass to deleteRows method to delete them.

Compeletely removes table from it's container.

This method is used to get child row for a table row. Thus, you can add content to the child row. See openChildRow method.

This method is used to get related row (jQuery selection) of a record by key field's value of the record.

This method returns true if child row is open for specified row. See openChildRow method.

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:

$('#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.

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

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

If you define the opened callback, you can get a reference to the container of opened child table. Thus, you can call methods of new jTable instance by this reference. For example, if your opened callback is defined as function(data){ ... } then you can get child table container as data.childTable and you can call any jTable method as data.childTable.reload();

Phones: {
    title: '',
    width: '5%',
    sorting: false,
    edit: false,
    create: false,
    listClass: 'child-opener-image-column',
    display: function (personData) {
        //Create an image that will be used to open child table
        var $img = $('<img class="child-opener-image" src="/Content/images/Misc/phone.png" title="Edit phone numbers" />');
        //Open child table when user clicks the image
        $img.click(function () {
            $('#PersonTable').jtable('openChildTable',
                    $img.closest('tr'),
                    {
                        title: personData.record.Name + ' - Phone numbers',
                        actions: {
                            listAction: '/PagingPerson/PhoneList?PersonId=' + personData.record.PersonId,
                            deleteAction: '/PagingPerson/DeletePhone',
                            updateAction: '/PagingPerson/UpdatePhone',
                            createAction: '/PagingPerson/CreatePhone?PersonId=' + personData.record.PersonId
                        },
                        fields: {
                            PhoneId: {
                                key: true,
                                create: false,
                                edit: false,
                                list: false
                            },
                            PhoneType: {
                                title: 'Phone type',
                                width: '30%',
                                options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }
                            },
                            Number: {
                                title: 'Phone Number',
                                width: '30%'
                            },
                            RecordDate: {
                                title: 'Record date',
                                width: '20%',
                                type: 'date',
                                displayFormat: 'dd.mm.yy',
                                create: false,
                                edit: false
                            }
                        }
                    }, function (data) { //opened handler
                        data.childTable.jtable('load');
                    });
        });
        //Return image to show on the person row
        return $img;
    }

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.

Gets all selected rows on the table as jQuery selection. See the sample below:

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

This method is used to select one or more rows on the table. rows parameter must be a jQuery selection.

Can be used to programmatically open a 'create new record' form dialog.

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:

$('#StudentTableContainer').jtable('updateRecord', {
	record: {
		StudentId: 42,
		Name: 'Halil Kalkan',
		EmailAddress: '[email protected]',
		Password: '123456',
		Gender: 'M',
		CityId: 4,
		BirthDate: '2001-11-18',
		Education: '3',
		About: 'updated this record',
		IsActive: true,
		RecordDate: '2012-01-05'
	}
});