Blame |
Last modification |
View Log
| Download
| RSS feed
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Ajax Datatables
<small>ajax datatable samples
</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="#/dashboard.html">Home
</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#/datatables/advanced.html">Datatables
</a>
</li>
<li>
<a href="#/datatables/advanced.html">Ajax Datatables
</a>
</li>
</ul>
<div class="page-toolbar">
<div class="btn-group pull-right">
<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
Actions
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User
</a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event
<span class="badge badge-success">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders
<span class="badge badge-danger">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users
<span class="badge badge-warning">12
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN MAIN CONTENT -->
<div class="row">
<div class="col-md-12">
<div class="note note-danger">
<p>
NOTE: The below datatable is not connected to a real database so the filter and sorting is just simulated for demo purposes only.
</p>
</div>
<!-- Begin: life time stats -->
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-shopping-cart"></i>Order Listing
</div>
<div class="actions">
<a href="#" class="btn default yellow-stripe">
<i class="fa fa-plus"></i>
<span class="hidden-480">
New Order
</span>
</a>
<div class="btn-group">
<a class="btn default yellow-stripe" href="#" data-toggle="dropdown">
<i class="fa fa-share"></i>
<span class="hidden-480">
Tools
</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
Export to Excel
</a>
</li>
<li>
<a href="#">
Export to CSV
</a>
</li>
<li>
<a href="#">
Export to XML
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Print Invoices
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="portlet-body">
<div class="table-container">
<div class="table-actions-wrapper">
<span>
</span>
<select class="table-group-action-input form-control input-inline input-small input-sm">
<option value="">Select...
</option>
<option value="Cancel">Cancel
</option>
<option value="Cancel">Hold
</option>
<option value="Cancel">On Hold
</option>
<option value="Close">Close
</option>
</select>
<button class="btn btn-sm yellow table-group-action-submit"><i class="fa fa-check"></i> Submit
</button>
</div>
<table class="table table-striped table-bordered table-hover" id="datatable_ajax">
<thead>
<tr role="row" class="heading">
<th width="2%">
<input type="checkbox" class="group-checkable">
</th>
<th width="5%">
Record
#
</th>
<th width="15%">
Date
</th>
<th width="15%">
Customer
</th>
<th width="10%">
Ship
To
</th>
<th width="10%">
Price
</th>
<th width="10%">
Amount
</th>
<th width="10%">
Status
</th>
<th width="10%">
Actions
</th>
</tr>
<tr role="row" class="filter">
<td>
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="order_id">
</td>
<td>
<div class="input-group date date-picker margin-bottom-5" data-date-format="dd/mm/yyyy">
<input type="text" class="form-control form-filter input-sm" readonly name="order_date_from" placeholder="From">
<span class="input-group-btn">
<button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
<div class="input-group date date-picker" data-date-format="dd/mm/yyyy">
<input type="text" class="form-control form-filter input-sm" readonly name="order_date_to" placeholder="To">
<span class="input-group-btn">
<button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="order_customer_name">
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="order_ship_to">
</td>
<td>
<div class="margin-bottom-5">
<input type="text" class="form-control form-filter input-sm" name="order_price_from" placeholder="From"/>
</div>
<input type="text" class="form-control form-filter input-sm" name="order_price_to" placeholder="To"/>
</td>
<td>
<div class="margin-bottom-5">
<input type="text" class="form-control form-filter input-sm margin-bottom-5 clearfix" name="order_quantity_from" placeholder="From"/>
</div>
<input type="text" class="form-control form-filter input-sm" name="order_quantity_to" placeholder="To"/>
</td>
<td>
<select name="order_status" class="form-control form-filter input-sm">
<option value="">Select...
</option>
<option value="pending">Pending
</option>
<option value="closed">Closed
</option>
<option value="hold">On Hold
</option>
<option value="fraud">Fraud
</option>
</select>
</td>
<td>
<div class="margin-bottom-5">
<button class="btn btn-sm yellow filter-submit margin-bottom"><i class="fa fa-search"></i> Search
</button>
</div>
<button class="btn btn-sm red filter-cancel"><i class="fa fa-times"></i> Reset
</button>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- End: life time stats -->
</div>
</div>
<!-- END MAIN CONTENT -->
<!-- BEGIN MAIN JS -->
<script>
TableAjax.init();
</script>
<!-- END MAIN JS -->