<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/Askedio/jQuery-Cruddy/master/src/css/jquery-cruddy.css" rel="stylesheet">
<!-- INSERT TEMPLATE HERE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.73/jsrender.min.js"></script>
<script src="https://cdn.rawgit.com/Askedio/jQuery-Cruddy/master/src/js/jquery-cruddy.js"></script>
<script>
$('.container-user').cruddy();
</script>
data-href=
Look for the data-href=, these are what will be used for your urls - adjust them to match your json api.
var pluginName = 'cruddy',
defaults = {
strict: true, /* force [send|receive] headers to be application/vnd.api+json */
slug: 'users', /* slug used to cache local settings like url,sort,search */
validation: 'validateLaravel', /* the function used to validate form errors */
listtype: 'listLaravel', /* the function used to generate lists */
autofocus: true, /* auto focus first visible input in modal when [edit|create] */
templates: {
noresults : '#no-results', /* the jsrender template for no results */
create_edit: '#create-edit', /* the jsrender template for [create|edit] modal */
pagination: '#list-pagination', /* the jsrender template for the pagination */
row: '#row-item' /* the jsrender template for results */
},
selectors: {
create: '.btn-create', /* the button used to trigger the create modal */
del: 'button[data-action="delete"]', /* the button used to delete a list item */
id: 'input[name="id"]', /* the (hidden) input used to as the id for the user */
limit: '[name="limit"]', /* the input used to define the list limit */
modal: '#modal-create-edit', /* the modal for [create|edit] */
refresh: '.btn-refresh', /* the button used to refresh list data */
pagination: '.pagination > li > span', /* the paginatied elements used for next/prev */
read: 'button[data-action="read"]', /* the button used to edit a list item */
search: '.search', /* the input used for searching the list */
search_field: 'input[name="q"]', /* .. */
sort: 'th[data-col]', /* the attibute to use for sorting the list */
table: '.table-list', /* the list table */
update: '.create-edit' /* the form used in [create|edit] modal */
},
styles: {
tbody: 'table tbody', /* the lists tbody */
thead: 'thead', /* the lists thead */
pagination: 'list-pagination', /* the lists pagination container */
hide: 'hide', /* invisible elements */
form_group: 'form-group', /* form item groups */
em: 'em', /* used for icons [em|i] */
alert: {
base: 'alert-control', /* base alert */
alert_success: 'alert-success', /* alert ok */
alert_danger: 'alert-danger' /* alert not ok */
},
refresh: {
btn_refresh: 'btn-refresh', /* refresh btn */
fa_spin: 'fa-spin' /* spin */
},
sort: {
em: 'em-sort', /* use this icon for sort arrow changes */
fa: 'fa-sort', /* base sort icon */
sort_asc: 'fa-sort-asc', /* asc icon */
sort_desc: 'fa-sort-desc' /* desc icon */
},
error: {
has_error: 'has-error', /* form error */
help_block: 'help-block', /* form block */
strong: 'strong' /* element in the error */
}
},
lang: {
saved: 'Saved', /* alert save */
deleted: 'Deleted', /* alert deleted */
confirm: 'Are you sure?', /* confirm delete */
errors: { /* translate error codes to messages, new json api will be different */
default: 'Error',
500: 'Internal Server Error',
404: 'Not Found',
415: 'Unsupported Media Type',
406: 'Not Acceptable'
}
},
list: {
direction: 'asc', /* default sort direction */
limit: 10, /* default limit */
sort: 'id', /* default sort id */
search: '' /* default search */
},
create: { /* define data your templates.create_edit requires */
attributes: {
id: '',
name: '',
email: ''
}
},