<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Documentation</title>
<link href="css/monokai.css" rel="stylesheet">
<link href="css/themify-icons.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="main/assets/css/lib/jquery-ui.min.css" rel="stylesheet" />
<link href="main/assets/css/lib/lobipanel.min.css" rel="stylesheet" />
<link href="main/assets/css/lib/menubar/hoe.css" rel="stylesheet">
<link href="main/assets/css/lib/bootstrap.min.css" rel="stylesheet">
<link href="main/assets/css/style.css" rel="stylesheet">
<link href="css/doc-style.css" rel="stylesheet">
</head>
<body hoe-navigation-type="horizontal" hoe-nav-placement="left" theme-layout="wide-layout">
<div class="header header-bg">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-top">
<div class="pull-left">
<div class="logo"><a href="index.html"><span>Focus</span></a></div>
</div>
<div class="pull-right">
<ul>
<li class="header-icon dib"><i class="ti-email"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div id="hoeapp-wrapper" class="hoe-hide-lpanel" hoe-device-type="desktop">
<header id="hoe-header" hoe-lpanel-effect="shrink" hoe-color-type="logo-bg7">
<div class="hoe-left-header">
<span class="hoe-sidebar-toggle"><a href="javascript:void(0)"></a></span>
</div>
</header>
<div id="hoeapp-container">
<aside id="hoe-left-panel" hoe-position-type="absolute">
<ul class="nav panel-list m-0">
<li>
<a href="index.html">
<span class="menu-text">Index</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="calendar.html">
<span class="menu-text">Calendar</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="chart.html">
<span class="menu-text">Chart</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="colorpicker.html">
<span class="menu-text">Colorpicker</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="datamap.html">
<span class="menu-text">Datamap</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="data-table.html">
<span class="menu-text">Data Table</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="gmap.html">
<span class="menu-text">Gmap</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="image-crop.html">
<span class="menu-text">Image Crop</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="jsgrid.html">
<span class="menu-text">Js Grid</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="knob.html">
<span class="menu-text">Knob</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="modal.html">
<span class="menu-text">Modal</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="multiselect.html">
<span class="menu-text">Multiselect</span>
<span class="selected"></span>
</a>
</li>
<li class="hoe-has-menu">
<a href="javascript:void(0)">
<span class="menu-text">More</span>
<span class="selected"></span>
</a>
<ul class="hoe-sub-menu">
<li>
<a href="multiselect-dropdown.html">
<span class="menu-text">Multiselect Dropdown</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="nestable.html">
<span class="menu-text">Nestable</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="panel.html">
<span class="menu-text">Panel</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="peity-chart.html">
<span class="menu-text">Peity Chart</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="rangeslider.html">
<span class="menu-text">Rangeslider</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="rating1.html">
<span class="menu-text">Rating 1</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="rating2.html">
<span class="menu-text">Rating 2</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="scrollable.html">
<span class="menu-text">Scrollable</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="select2-dropdown.html">
<span class="menu-text">Select2-dropdown</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="sperkline-chart.html">
<span class="menu-text">Sperkline Chart</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="sweetalert.html">
<span class="menu-text">Sweetalert</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="toastr.html">
<span class="menu-text">Toastr.html</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="todo.html">
<span class="menu-text">Todo</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="vector-map.html">
<span class="menu-text">Vector Map</span>
<span class="selected"></span>
</a>
</li>
</ul>
</li>
</ul>
</aside>
<section id="main-content">
<div class="row">
<div class="col-lg-12">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">Instruction</div>
</div>
<div class="panel-body">
Datatable Plugin <a class="plugin-link" href="https://datatables.net/examples/styling/bootstrap.html" target="_blank"> Click Here</a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">HTML</div>
</div>
<div class="panel-body">
<pre><code class="html">
<link href="../main/assets/css/lib/jsgrid/jsgrid-theme.min.css" rel="stylesheet" />
<link href="../main/assets/css/lib/jsgrid/jsgrid.min.css" type="text/css" rel="stylesheet" />
<div id="jsGrid"></div>
<!-- JS Grid Scripts Start-->
<script src="../main/assets/js/lib/jsgrid/db.js"></script>
<script src="../main/assets/js/lib/jsgrid/jsgrid.core.js"></script>
<script src="../main/assets/js/lib/jsgrid/jsgrid.load-indicator.js"></script>
<script src="../main/assets/js/lib/jsgrid/jsgrid.load-strategies.js"></script>
<script src="../main/assets/js/lib/jsgrid/jsgrid.sort-strategies.js"></script>
<script src="../main/assets/js/lib/jsgrid/jsgrid.field.js"></script>
<script src="../main/assets/js/lib/jsgrid/fields/jsgrid.field.text.js"></script>
<script src="../main/assets/js/lib/jsgrid/fields/jsgrid.field.number.js"></script>
<script src="../main/assets/js/lib/jsgrid/fields/jsgrid.field.select.js"></script>
<script src="../main/assets/js/lib/jsgrid/fields/jsgrid.field.checkbox.js"></script>
<script src="../main/assets/js/lib/jsgrid/fields/jsgrid.field.control.js"></script>
<script src="../main/assets/js/lib/jsgrid/jsgrid-init.js"></script>
<!-- JS Grid Scripts End-->
</code></pre>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">CSS</div>
</div>
<div class="panel-body">
<pre><code class="less">
/* CSS */
.bootstrap-data-table-panel .dataTables_filter {
text-align: right;
}
</code></pre>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">Javascript</div>
</div>
<div class="panel-body">
<pre><code class="javascript">
/* Data Table
-------------*/
$('#bootstrap-data-table').DataTable();
</code></pre>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="main/assets/js/lib/jquery.min.js"></script>
<script src="main/assets/js/lib/lobipanel.js"></script>
<script src="main/assets/js/lib/jquery-ui.min.js"></script>
<script src="main/assets/js/lib/jquery.ui.touch-punch.min.js"></script>
<script src="main/assets/js/lib/jquery.nanoscroller.min.js"></script>
<script src="main/assets/js/lib/sidebar.js"></script>
<script src="main/assets/js/lib/bootstrap.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'></script>
<script src="js/scripts.js"></script>
</body>
</html> |