Thanks to visit codestin.com
Credit goes to github.com

Skip to content
Franky Van Liedekerke edited this page Jul 26, 2025 · 3 revisions

jTable tips

Check if jtable is initialized

if ($('#MyTable').data('jtable')) {
    console.log('jTable is initialized!');
} else {
    console.log('jTable is NOT initialized.');
}

So, it is easy to call an instance and do things:

let jtInstance = $('#MyTable').data('jtable');
jtInstance.editRecordByKey(42);

Prevent row select on click

Normally, if a row contains a clickable element (like a link, button, ..), clicking on that element also selects the row if the selectOnRowClick-option is set. If you want to prevent this row select, give the element the class "norowselectonclick".

CSS: force columns

An example to use 2 columns for the create/edit dialogs:

.jtable-dialog-form {
    display: block;
    -moz-column-gap:40px;
    /* Firefox */
    -webkit-column-gap:40px;
    /* Safari and Chrome */
    column-gap:40px;
    -moz-column-count:2;
    /* Firefox */
    -webkit-column-count:2;
    /* Safari and Chrome */
    column-count:2;
}
.jtable-input-field-container {
    break-inside: avoid; /* Prevent breaking across columns */
    page-break-inside: avoid; /* Older browsers, mainly print */
    -webkit-column-break-inside: avoid; /* Safari, older Chrome */
}
@media (max-width: 600px) {
    .jtable-dialog-form {
        -moz-column-count:1;
        -webkit-column-count:1;
        column-count: 1;
    }
}
Clone this wiki locally