Creating Live Editable Table with jQuery

Creating Live Editable Table with jQuery – Tabledit v1.2.3

Tabledit is a small jQuery plugin that help you for creating live editable table with jQuery. It makes AJAX-enabled available in-place editing for your table cells. This plugin has the capability to transmute tables cells into input fields. It also helps to select dropdowns with custom trigger events to give the visitors a speedy way to change cell values ​​in a straight line.

Usage

Add the jQuery tabledit plugin and jQuery library.

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery.tabledit.js"></script>

Call the plugin on present table and specify the editable columns whatsoever you like.

Example #1: Add toolbar column with edit and delete buttons.

$('#example1').Tabledit({
    url: 'example.php',
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'nickname'], [2, 'firstname'], [3, 'lastname']]
    }
});

Example #2: Aligned edit like a spreadsheet with double click and “select” instead of text input.

$('#example2').Tabledit({
    url: 'example.php',
    eventType: 'dblclick',
    editButton: false,
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'car'], [2, 'color', '{"1": "Red", "2": "Green", "3": "Blue"}']]
    }
});

Live Editable Table with jQuery

Live Editable Table with jQuery

Example #3: Inline edit like a spreadsheet on two columns only and deprived of identifier column.

$('#example3').Tabledit({
    url: 'example.php',
    editButton: false,
    deleteButton: false,
    hideIdentifier: true,
    columns: {
        identifier: [0, 'id'],
        editable: [[2, 'firstname'], [3, 'lastname']]
    }
});

Example #4: Inline edit like a spreadsheet, toolbar column with edit button only, lacking focus on first input.

$('#example4').Tabledit({
    url: 'example.php',
    deleteButton: false,
    saveButton: false,
    autoFocus: false,
    buttons: {
        edit: {
            class: 'btn btn-sm btn-primary',
            html: '<span class="glyphicon glyphicon-pencil"></span> &nbsp EDIT',
            action: 'edit'
        }
    },
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'car'], [2, 'color']]
    }
});

Example #5: Toolbar with delete button only and another name for row identifier attribute.

$('#example5').Tabledit({
    url: 'example.php',
    rowIdentifier: 'data-id',
    editButton: false,
    restoreButton: false,
    buttons: {
        delete: {
            class: 'btn btn-sm btn-danger',
            html: '<span class="glyphicon glyphicon-trash"></span> &nbsp DELETE',
            action: 'delete'
        },
        confirm: {
            class: 'btn btn-sm btn-default',
            html: 'Are you sure?'
        }
    },
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'nickname'], [2, 'firstname'], [3, 'lastname']]
    }
});

All the plugin options.

$('#my-table').Tabledit({

// link to server script
// e.g. 'ajax.php'
url: window.location.href,

// class for form inputs
inputClass: 'form-control input-sm',

// // class for toolbar
toolbarClass: 'btn-toolbar',

// class for buttons group
groupClass: 'btn-group btn-group-sm',

// class for row when ajax request fails
dangerClass: 'danger',

// class for row when save changes
warningClass: 'warning',

// class for row when is removed
mutedClass: 'text-muted',

// trigger to change for edit mode.
// e.g. 'dblclick'
eventType: 'click',

// change the name of attribute in td element for the row identifier
rowIdentifier: 'id',

// activate focus on first input of a row when click in save button
autoFocus: true,

// hide the column that has the identifier
hideIdentifier: false,

// activate edit button instead of spreadsheet style
editButton: true,

// activate delete button
deleteButton: true,

// activate save button when click on edit button
saveButton: true,

// activate restore button to undo delete action
restoreButton: true,

// custom action buttons
buttons: {
  edit: {
    class: 'btn btn-sm btn-default',
    html: '<span class="glyphicon glyphicon-pencil"></span>',
    action: 'edit'
  },
  delete: {
    class: 'btn btn-sm btn-default',
    html: '<span class="glyphicon glyphicon-trash"></span>',
    action: 'delete'
  },
  save: {
    class: 'btn btn-sm btn-success',
    html: 'Save'
  },
  restore: {
    class: 'btn btn-sm btn-warning',
    html: 'Restore',
    action: 'restore'
  },
  confirm: {
    class: 'btn btn-sm btn-danger',
    html: 'Confirm'
  }
},

// executed after draw the structure
onDraw: function() { return; },

// executed when the ajax request is completed
// onSuccess(data, textStatus, jqXHR)
onSuccess: function() { return; },

// executed when occurred an error on ajax request
// onFail(jqXHR, textStatus, errorThrown)
onFail: function() { return; },

// executed whenever there is an ajax request
onAlways: function() { return; },

// executed before the ajax request
// onAjax(action, serialize)
onAjax: function() { return; }

});

File Information

File Size10.51 KB
Last Update3 Months Ago
Date Published6 Years Ago
LicenseMIT

Your email address will not be published. Required fields are marked *

More Stories
JavaScript Image Parallax Scroll – SimpleParallax
JavaScript Image Parallax Scroll – SimpleParallax