Skip to content

api_general

Jump to bottom
Franky Van Liedekerke edited this page Jul 26, 2025 · 33 revisions

jTable API Reference - 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

Set options in jTable initialization code. For example, to disable column resizing:

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

Global Options

To disable column resizing for all jTable instances:

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

Extending Options

To set multiple options:

<script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js">
<script type="text/javascript">
    $.extend(true, $.jTable.prototype.options, {
        columnResizable: false,
        animationsEnabled: false,
        ajaxSettings: {
            type: 'GET'
        }
    });
</script>

List of General Options

addRecordButton

  • Type: jQuery object
  • Default: Auto-generated link
  • Description: A jQuery object that can be used instead of the '+ add new record' link. Using this you can set any element on the page to open the 'add new record' dialog. If not provided, a button will be created on the toolbar.
  • Dependancy: does nothing and generates nothing on the toolbar if the action createAction is not defined.

ajaxSettings

  • Type: Object
  • Default: 
    ajaxSettings: {
    type: 'POST',
    dataType: 'json'
}
  • Description: Defines default options for all AJAX requests performed by jTable. See jQuery's $.ajax for all available options.

animationsEnabled

  • Type: Boolean
  • Default: true
  • Description: Indicates whether jTable shows animations when creating, updating, or deleting a row.

csvDelimiter

  • Type: string
  • Default: ;
  • Description: the delimiter used for CSV exports

csvExport

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable should do provide CSV functionality. If the option csvExportButton is not provided, a button will be created on the toolbar. The text of that button can be changed by the localisation string csvExport. The CSV delimiter can be changed by the option csvDelimiter.

csvExportButton

  • Type: jQuery object
  • Default: none
  • Description: A jQuery object that can be used instead of the automatically generated CSV export button on the toolbar. Using this you can set any element on the page to trigger the csv export. If not provided, a button will be created on the toolbar if the option csvExport is set to true.

columnResizable

  • Type: Boolean
  • Default: true
  • Description: Indicates whether jTable allows users to resize data columns by dragging.

columnSelectable

  • Type: Boolean
  • Default: true
  • Description: Indicates whether jTable allows users to show/hide data columns by right-clicking the table header.

defaultDateFormat

  • Type: String
  • Default: 'yy-mm-dd'
  • Description: Default format of a date field if a datepicker is detected (fdatepicker, flatpickr, jQueryUI datepicker) is present. See the format of the accordingly detected datepicker. If no datepicker is detected, this value is ignored, but see 'defaultDateLocale'

defaultDateLocale

  • Type: String
  • Default: None,
  • Description: Default locale used to display values for a field of type 'date' in case no specific datepicker is used or to translate date strings in case of a detected datepicker (see below). Example: 'nl-BE' or 'en-US'. Default is empty, meaning your browser locale is used if no specific datepicker is used(the same format as the input datepicker then). For datepickers (fdatepicer, flatpickr, jQueryUI datepicker): this is used to translate date strings, not formatting.

defaultSorting

  • Type: String
  • Default: None
  • Description: Default sorting of the table. Example: 'Name ASC' or 'Name DESC'.

deleteConfirmation

  • Type: Boolean or Function
  • Default: true
  • Description: Controls the delete confirmation process. If true, the confirmation text is taken from the localization option messages.deleteConfirmation (see api_localization). If a function, it can customize the confirmation message and behavior.

Function example:

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

If a function, the function argument ("data" in the example above) 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.

formDialogWidth

  • Type: css-width
  • Default: ''
  • Description: a css-width that changesthe auto-width of the create/edit dialog to something else

gotoPageArea

  • Type: String
  • Default: 'combobox'
  • Description: Determines how to show the 'go to page' input. Possible values:
    • 'combobox': Show a combobox with all pages.
    • 'textbox': Show a text box.
    • 'none': Do not show the input.

jqueryuiTheme

  • Type: Boolean
  • Default: false
  • Description: If true, jTable uses jQueryUI's color schema and styles.
    jTable has it's own themes those can be used easily. But, you may want to use color schema and styles of your jQueryUI as jTable's theme. So, this option can be used to declare jTable to use jQueryUI's colors and styles. To do it, set jqueryuiTheme: true in your jTable initialization code and include needed css files to your page as shown below:
<!-- jQueryUI's css file -->
<link href=".../jqueryUi/themes/redmond/jquery-ui-1.10.1.custom.min.css")" rel="stylesheet" type="text/css" />
<!-- jTable's jQueryUi css file -->
<link href=".../jtable/themes/jqueryui/jtable_jqueryui.css")" rel="stylesheet" type="text/css" />

jQueryUI has a powerful theme system. You can create your own theme on https://jqueryui.com/themeroller/.

listQueryParams

  • Type: object
  • Default: empty
  • Description: a list of parameters to be used on every load-call, can be a function
  • Examples:
            listQueryParams: {
                    'action': "my_action",
                    'other_param': "other_value",
            }

Or, if you want data evaluated live:

            listQueryParams: function () {
                let params = {
                    'action': "my_action",
                    'search_person': $('#search_person').val(),
                    'search_groups': $('#search_groups').val(),
                }
                return params;

loadingAnimationDelay

  • Type: Integer
  • Default: 500
  • Description: Delay (in milliseconds) before showing the 'loading...' animation.

logLevel

  • Type: string or integer
  • Default: warning
  • Description: limit jTable console messages to the mentioned level. Possible values:
    • 'debug'
    • 'info'
    • 'warn'
    • 'error'

messages

  • Type: Object
  • Description: Used to localize jTable. See localization.

multiselect

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable allows users to select multiple rows at once.

multiSorting

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable allows users to sort by multiple columns. If this option is set to true, User can perform multiple sorting by holding CTRL key, see multiSortingCtrlKey.
    If user selects multiple column for sorting, jTable sends column names seperated by comma as like 'Name DESC,BirthDay ASC'. See listAction for more information.

multiSortingCtrlKey

  • Type: Boolean
  • Default: true
  • Description: If true you need to hold down the Ctrl-key for multi-column sorting. If false, you need to select/deselect the columns for multisort by clicking on those.

openChildAsAccordion

  • Type: Boolean
  • Default: false
  • Description: If true, jTable automatically closes other open child tables when a new one is opened.

paging

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable uses paging. See listAction for more information.

pageList

  • Type: String
  • Default: 'normal'
  • Description: Determines the type of page list. Possible values:
    • 'minimal': Show only first, previous, next, and last links.
    • 'normal': Show page numbers in addition to 'minimal'.

pageSize

  • Type: Number
  • Default: 10
  • Description: Number of rows per page. pageSize option can be changed later as like below:
$('#MyTableContainer').jtable('option', 'pageSize', 20);

pageSizes

  • Type: Array of Numbers
  • Default: [10, 25, 50, 100, 250, 500]
  • Description: Determines the options in the 'page size change combobox'.

pageSizeChangeArea

  • Type: Boolean
  • Default: true
  • Description: Determines whether the 'page size change combobox' is visible.

printExtraStyles

  • Type: String
  • Default: none
  • Description: extra CSS (inline) to be added to the print dialog if you want to change the print layout

printMode

  • Type: String
  • Default: iframe
  • Description: Which method should be used to open the print dialog. Possible values: iframe or popup

printTable

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable should do provide print Table functionality. If the option printTableButton is not provided, a button will be created on the toolbar. The text of that button can be changed by the localisation string printTable.

printTableButton

  • Type: jQuery object
  • Default: none
  • Description: A jQuery object that can be used instead of the automatically generated print export button on the toolbar. Using this you can set any element on the page to trigger the print action. If not provided, a button will be created on the toolbar if the option printTable is set to true.

roomForSortableIcon

  • Type: Boolean
  • Default: true
  • Description: adds some room next to the column title, so the sortable icon has room to appear next to the text

saveUserPreferences

  • Type: Boolean
  • Default: true
  • Description: Indicates whether jTable saves/loads user preferences (e.g., 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.

saveUserPreferencesMethod

  • Type: String
  • Default: localstorage
  • Description: Indicates how jTable saves/loads user preferences. Possible values:
    • 'localstorage': Store user preferences in browser local storage (default and preferred)
    • 'cookie': Store user preferences in cookies. You need to load the jQuery js-cookie plugin first for this to work

selecting

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable allows users to select rows.

selectingCheckboxes

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable shows a checkbox column for selecting rows.

selectOnRowClick

  • Type: Boolean
  • Default: true
  • Description: Indicates whether users can select a row by clicking anywhere on it. If a row contains a clickable element (like a link, button, ..), clicking on that element also selects the row if this option is set. If you want to prevent the row select in this case, give the element the class "norowselectonclick".

showCloseButton

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable shows a close button for the table.

sorting

  • Type: Boolean
  • Default: false
  • Description: Indicates whether jTable allows sorting.

sortingInfoReset

  • Type: Boolean
  • Default: True
  • Description: If true, a button will be shown next to the sorting info to reset the sorting to its default. Only works if sortingInfoSelector is set.

sortingInfoSelector

  • Type: String
  • Default: ''
  • Description: if not empty, it should be a jquery selector where the current applied table sorting will be displayed. The localized messages sortingInfoPrefix and sortingInfoSuffix are used too.

tableId

  • Type: String
  • Default: None
  • Description: A unique identifier for the table, used for saving/restoring user preferences.

tableReset

  • Type: Boolean
  • Default: false
  • Description: If true, a button will be shown next to the sorting info to reset the complete table to its default settings. Only works if sortingInfoSelector is set.

title

  • Type: String
  • Default: None
  • Description: A string shown at the top of the table.

toolbar

  • Type: Object
  • Default: 
    toolbar: {
    items: []
}
  • Description: Controls the jTable toolbar and its items. By default, no items are on the toolbar. jTable adds the 'Add new record' item if you define createAction, the CSV export item (see csvExport and/or the print item (see printTable). Using this option, you can add custom items

Example:

toolbar: {
    items: [{
        icon: '/images/excel.png',
        text: 'Export to Excel',
        click: function () {
            // Custom code...
        }
    }]
}

icon, text and click are optional. But you must define 'icon' and/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.

The items added via the toolbar option are added before any items added by jTable itself.

toolbarreset

  • Type: Boolean
  • Default: false
  • Description: Indicates whether the toolbar should show the seach reset button. If 'toolbarsearch' is not set, this setting is ognored

toolbarsearch

  • Type: Boolean
  • Default: false
  • Description: Indicates whether the toolbar should show a seach form per field. This can be overriden per field via the 'searchable' option

This passes the params 'q' and 'opt' to the listAction url. A simple example in php on how to use these:

    global $pdo;

    $q = $_POST['q'] ?? [];
    $opt = $_POST['opt'] ?? [];
    $where = '';
    $params = [];

    // Validate and process search parameters
    if (!empty($q) && is_array($q) && is_array($opt) && count($q) === count($opt)) {
        foreach ($opt as $i => $field) {
            $where_array[] = "`" . str_replace("`", "``", $field) . "` LIKE ?";
            $params[] = '%' . addcslashes($q[$i], '%\\') . '%';
        }
    }

    if (!empty($where_array)) {
            $where = ' WHERE ' . implode(' AND ', $where_array);
    }
    ....
    $stmt->execute([$params]);

unAuthorizedRequestRedirectUrl

  • Type: String
  • Default: None
  • Description: URL to redirect when an AJAX request returns UnAuthorizedRequest = true or HTTP status 401.

jTable Documentation

Getting Started

API reference

Tips

Examples

Clone this wiki locally