jQuery Editable Data Table with Custom Fields

Custom Fields is a jQuery & Bootstrap based data table which allows you to add, edit or delete custom fields with ease.

How to use it:

1. Include the jQuery javascript library, custom-fields.js, and Twitter Bootstrap 3 in the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2. Include the Font Awesome 4 for the icons.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

3. Create an empty table in the document.

<table id="data" class="table table-striped table-condensed">
</table>

4. Setup the plugin at the beginning of the custom-fields.js.

var target = '#data';
var customFields = {
data: {
1: {
enabled: true,
fieldName: 'COMPANYCODE',
prettyName: 'Company Name',
fieldType: 'OEM',
fieldValue: ''
},
2: {
enabled: true,
fieldName: 'CLIENTID',
prettyName: 'Client ID',
fieldType: 'OEM',
fieldValue: ''
},
3: {
enabled: false,
fieldName: '',
prettyName: '',
fieldType: '',
fieldValue: ''
},
4: {
enabled: false,
fieldName: '',
prettyName: '',
fieldType: '',
fieldValue: ''
},
5: {
enabled: false,
fieldName: '',
prettyName: '',
fieldType: '',
fieldValue: ''
},
6: {
enabled: false,
fieldName: '',
prettyName: '',
fieldType: '',
fieldValue: ''
},
7: {
enabled: false,
fieldName: '',
prettyName: '',
fieldType: '',
fieldValue: ''
},
8: {
enabled: false,
fieldName: '',
prettyName: '',
fieldType: '',
fieldValue: ''
},
9: {
enabled: false,
fieldName: '',
prettyName: '',
fieldType: '',
fieldValue: ''
}
},
xref: { // Key ['Label','column width',0|1] 1=admin only
custom: ['#', '10%',0],
actions: ['Actions', '5%',1],
enabled: ['Enabled','5%',0],
fieldName: ['Field', '20%',0],
prettyName: ['Pretty Name','20%',0],
fieldType: ['Type','30%',0],
fieldValue: ['Value','10%',0]
},
fieldTypes: [
[' ',' '],
['ENV','Environment (ENV)'],
['REG','Registry (REG)'],
['WMI','Windows Management Inst. (WMI)'],
['OEM','Original Equipment Manuf.(OEM)']
],
mode: {
row1: 'view',
row2: 'view',
row3: 'view',
row4: 'view',
row5: 'view',
row6: 'view',
row7: 'view',
row8: 'view',
row9: 'view',
},
multiedit: false,
admin: true
}

---

This awesome jQuery plugin is developed by brianducharme. For more Advanced Usages, please check the demo page or visit the official website.