Skip to content

api_methods

Jump to bottom
Franky Van Liedekerke edited this page Apr 21, 2025 · 8 revisions

jTable API Reference - Methods

addRecord

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

Syntax:

addRecord(options)

Parameters:

  • record: The record object to add (required).
  • clientOnly (boolean, default: false): If true, the record is only added to the table, not to the server.
  • animationsEnabled (boolean, default: table's behavior): If false, no animation is shown.
  • url (string, default: createAction of the table): A custom URL for creating the record.
  • success (function): Callback when the record is successfully added.
  • error (function): Callback if an error occurs.

Example:

$('#StudentTableContainer').jtable('addRecord', {
    record: {
        Name: 'My full Student name',
        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'
    }
});

closeChildRow

Closes an open child row for a table row. Used internally by jTable to close child tables. See openChildRow.

Syntax:

closeChildRow(row)

Parameters:

  • row: The jQuery row object.

closeChildTable

Closes an open child table for a table row.

Syntax:

closeChildTable(row, closed)

Parameters:

  • row: The jQuery row object.
  • closed: Callback function called when the child table is closed.

changeColumnVisibility

Changes the visibility of a column.

Syntax:

changeColumnVisibility(columnName, visibility)

Parameters:

  • columnName: The name of the column.
  • visibility: Can be 'fixed', 'visible', or 'hidden'.

deleteRecord

Deletes an existing record from the table programmatically.

Syntax:

deleteRecord(options)

Parameters:

  • key: The key (ID) of the record to delete (required).
  • clientOnly (boolean, default: false): If true, the record is only deleted from the table, not from the server.
  • animationsEnabled (boolean, default: table's behavior): If false, no animation is shown.
  • url (string, default: deleteAction of the table): A custom URL for deleting the record.
  • success (function): Callback when the record is successfully deleted.
  • error (function): Callback if an error occurs.

Example:

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

deleteRows

Deletes the specified rows from the server and table. This method can be combined with selectedRows method. Thus, you can get selected rows and pass to deleteRows method to delete them

Syntax:

deleteRows(rows)

Parameters:

  • rows: A jQuery selection of rows to delete.

deselectRows

Deselects the specified rows from the table.

Syntax:

deleteRows(rows)

Parameters:

  • rows: A jQuery selection of rows to deselect.

destroy

Completely removes the table from its container.

getChildRow

Returns the child row for a table row. Used to add custom content to the child row.

Syntax:

getChildRow(row)

Parameters:

  • row: The jQuery row object.

getRowByKey

Returns the jQuery row object for a record via the key field's value of the record key.

Syntax:

getRowByKey(keyValue)

getSortingInfo

Returns an array of fieldnames with their current sorting (ASC/DESC).

invertRowSelection

Inverts the selection state of the specified row in the table.

Syntax:

invertRowSelection(row)

Parameters:

  • row: A jQuery row to invert.

isChildRowOpen

Returns true if the child row is open for the specified row.

Syntax:

isChildRowOpen(row)

Parameters:

  • row: A jQuery row to check.

load

Loads records from the server.

Parameters:

  • postData: Optional data to send to the server.
  • completeCallback: Optional callback function called when loading is complete.

Example:

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

If parameters are given via the load-call and the same parameters exist in the listQueryParams option, the ones in the load-call add/override params defined in the listQueryParams option.

openChildRow

Opens a child row for a table row. Used to show custom content.

Syntax:

openChildRow(row)

Parameters:

  • row: A jQuery row for which to open a child row.

openChildTable

Opens a child table for a table row.

Parameters:

  • row: The jQuery row object.
  • tableOptions: Standard jTable options for the child table.
  • opened: Callback function called when the child table is opened.

Example:

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

reload

Reloads records from the server using the last postData.

Parameters:

  • completeCallback: Optional callback function called when reloading is complete.

resetSorting

Resets the table sorting to its default defined settings.

selectedRows

Returns all selected rows as a jQuery selection.

Example:

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

selectRows

Selects the specified rows.

Syntax:

selectRows(rows)

Parameters:

  • rows: A jQuery selection of rows to select.

showCreateForm

Programmatically opens a "create new record" form dialog.

updateRecord

Updates an existing record on the table programmatically.

Syntax:

updateRecord(options)

Parameters:

  • record: The record object to update (required).
  • clientOnly (boolean, default: false): If true, the record is only updated on the table, not on the server.
  • animationsEnabled (boolean, default: table's behavior): If false, no animation is shown.
  • url (string, default: updateAction of the table): A custom URL for updating the record.
  • success (function): Callback when the record is successfully updated.
  • error (function): Callback if an error occurs.

Example:

$('#StudentTableContainer').jtable('updateRecord', {
    record: {
        StudentId: 42,
        Name: 'My full Student name',
        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'
    }
});

jTable Documentation

Getting Started

API reference

Clone this wiki locally