JSON API Driven CRUD Data Table Plugin With jQuery - Cruddy
| File Size: | 12.5 KB |
|---|---|
| Views Total: | 11500 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Cruddy is a jQuery & Bootstrap plugin used to assist with JSON API driven CRUD tasks. The plugin makes it easier to add CRUD functionalities to you Bootstrap table with support for data filtering, sorting and paginating.
Basic usage:
1. The plugin requires jQuery library, Bootstrap framework and Font Awesome 4 have been loaded properly in the web page.
<script src="jquery.min.js"></script> <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.min.js"></script> <script src="jsrender.min.js"></script>
2. Include the jQuery Cruddy plugin's stylesheet and JavaScript files in the webpage.
<link rel="stylesheet" href="jquery-cruddy.css"> <script src="jquery-cruddy.js"></script>
3. The required HTML for the 'create new' modal.
<div id="modal-create-edit" class="modal fade" role="dialog">
<div class="modal-dialog">
<script id="create-edit" type="text/x-jsrender">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
{{if id}}
Edit #{{:id}}
{{else}}
Create
{{/if}}
</h4>
</div>
<div class="modal-body">
<div class="alert-control alert"></div>
<p></p>
<div class="form-group row">
<label class="col-md-4 control-label">Full Name</label>
<div class="col-md-6">
<input name="name" class="form-control" value="{{:attributes.name}}">
<span class="help-block hide">
<strong></strong>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input name="email" class="form-control" value="{{:attributes.email}}">
<span class="help-block hide">
<strong></strong>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<input name="id" class="hide" value="{{:id}}">
<button type="submit" class="btn btn-success">
{{if id}}
Save
{{else}}
Create
{{/if}}
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</script>
<form action="http://localhost:8000/api/admin/user" class="create-edit"></form>
</div>
</div>
4. Create 'refresh' and 'create new' buttons.
<button type="button" class="btn btn-default btn-refresh"><em class="fa fa-refresh"></em></button> <button type="button" class="btn btn-primary btn-create" data-toggle="modal" data-target="#modal-create-edit">Create New</button>
5. The html for the CRUD table.
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-7 col-md-9">
<h3 class="panel-title"> </h3>
</div>
<div class="col col-xs-5 col-md-3 text-right">
<form class="form-inline search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="submit" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-list" data-href="http://localhost:8000/api/admin/user?page=1&sort=id&direction=asc&limit=10">
<thead>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs" data-col="id">ID <em class="fa fa-fw fa-sort pull-right em-sort"></th>
<th data-col="name">Name <em class="fa fa-fw fa-sort pull-right em-sort"></em></th>
<th data-col="email">E-mail <em class="fa fa-fw fa-sort pull-right em-sort"></em></th>
</thead>
<tbody>
<tr><td colspan="4">Loading...</td></tr>
</tbody>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-4">
<form class="form-inline">
<select name="limit" class="form-control">
<option>1
<option>10
</select>
</form>
</div>
<div class="col col-xs-8 list-pagination">
</div>
</div>
</div>
</div>
6. The required JavaScript template.
<script id="no-results" type="text/x-jsrender">
<tr>
<td colspan="5"><strong>No Results Found.</strong></td>
</tr>
</script>
<script id="row-item" type="text/x-jsrender">
<tr>
<td align="center">
<button type="button" class="btn btn-default" data-action="read" data-href="http://localhost:8000/api/admin/user/{{:id}}" data-toggle="modal" data-target="#modal-create-edit"><em class="fa fa-pencil"></em></button>
<button type="button" class="btn btn-danger" data-action="delete" data-href="http://localhost:8000/api/admin/user/{{:id}}"><em class="fa fa-trash"></em></button>
</td>
<td class="hidden-xs">{{:id}}</td>
<td>{{:attributes.name}}</td>
<td>{{:attributes.email}}</td>
</tr>
</script>
<script id="list-pagination" type="text/x-jsrender">
<ul class="pagination pull-right">
{{if links.prev}}<li><span data-href="{{:links.prev}}">«</span></li>{{/if}}
<li><span disabled>{{:meta.currentPage}} of {{:meta.total}}</span></li>
{{if links.next}}<li><span data-href="{{:links.next}}">»</span></li>{{/if}}
</ul>
</script>
7. Active the plugin.
$('.container-user').cruddy();
8. Default plugin options.
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: '' } }, onConfirm: function($this, string, $ele){ return confirm(string); }
Change log:
2016-04-24
- New cruddy pagination settings.
This awesome jQuery plugin is developed by Askedio. For more Advanced Usages, please check the demo page or visit the official website.
