jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Update tables_dynamic.html

pull/776/head
razvanaldea89 2019-02-15 13:46:49 +02:00
parent 465f967bfd
commit b51b6e469f
1 changed files with 3725 additions and 3672 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
production/tables_dynamic.html
View File

@ -20,18 +20,20 @@
<!-- Datatables --> <!-- Datatables -->
<link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap4.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-responsive-bs/css/responsive.bootstrap4.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-scroller-bs/css/scroller.bootstrap4.min.css" rel="stylesheet">
<!-- Custom Theme Style --> <!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet"> <link href="../build/css/custom.css" rel="stylesheet">
<link href="../build/css/style-extra-bs4.css" rel="stylesheet">
</head> </head>
<body class="nav-md"> <body class="nav-md">
<div class="container body"> <div class="body">
<div class="main_container"> <div class="main_container container-fluid">
<div class="col-md-3 left_col"> <div class="row">
<div class="col-lg-2 left_col">
<div class="left_col"> <div class="left_col">
<div class="navbar nav_title" style="border: 0;"> <div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a> <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
@ -75,7 +77,8 @@
<li><a href="form_buttons.html">Form Buttons</a></li> <li><a href="form_buttons.html">Form Buttons</a></li>
</ul> </ul>
</li> </li>
<li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a> <li><a><i class="fa fa-desktop"></i> UI Elements <span
class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu"> <ul class="nav child_menu">
<li><a href="general_elements.html">General Elements</a></li> <li><a href="general_elements.html">General Elements</a></li>
<li><a href="media_gallery.html">Media Gallery</a></li> <li><a href="media_gallery.html">Media Gallery</a></li>
@ -94,7 +97,8 @@
<li><a href="tables_dynamic.html">Table Dynamic</a></li> <li><a href="tables_dynamic.html">Table Dynamic</a></li>
</ul> </ul>
</li> </li>
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a> <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span
class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu"> <ul class="nav child_menu">
<li><a href="chartjs.html">Chart JS</a></li> <li><a href="chartjs.html">Chart JS</a></li>
<li><a href="chartjs2.html">Chart JS2</a></li> <li><a href="chartjs2.html">Chart JS2</a></li>
@ -114,7 +118,8 @@
<div class="menu_section"> <div class="menu_section">
<h3>Live On</h3> <h3>Live On</h3>
<ul class="nav side-menu"> <ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a> <li><a><i class="fa fa-bug"></i> Additional Pages <span
class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu"> <ul class="nav child_menu">
<li><a href="e_commerce.html">E-commerce</a></li> <li><a href="e_commerce.html">E-commerce</a></li>
<li><a href="projects.html">Projects</a></li> <li><a href="projects.html">Projects</a></li>
@ -133,7 +138,8 @@
<li><a href="pricing_tables.html">Pricing Tables</a></li> <li><a href="pricing_tables.html">Pricing Tables</a></li>
</ul> </ul>
</li> </li>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a> <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span
class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu"> <ul class="nav child_menu">
<li><a href="#level1_1">Level One</a> <li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a> <li><a>Level One<span class="fa fa-chevron-down"></span></a>
@ -150,7 +156,8 @@
</li> </li>
</ul> </ul>
</li> </li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li> <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span
class="label label-success pull-right">Coming Soon</span></a></li>
</ul> </ul>
</div> </div>
@ -175,9 +182,10 @@
<!-- /menu footer buttons --> <!-- /menu footer buttons -->
</div> </div>
</div> </div>
<div class="col-lg-10">
<div class="row">
<!-- top navigation --> <!-- top navigation -->
<div class="top_nav"> <div class="col-lg-12 top_nav">
<div class="nav_menu"> <div class="nav_menu">
<nav> <nav>
<div class="nav toggle"> <div class="nav toggle">
@ -186,7 +194,8 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li class=""> <li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <a href="javascript:;" class="user-profile dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe <img src="images/img.jpg" alt="">John Doe
<span class=" fa fa-angle-down"></span> <span class=" fa fa-angle-down"></span>
</a> </a>
@ -199,12 +208,14 @@
</a> </a>
</li> </li>
<li><a href="javascript:;">Help</a></li> <li><a href="javascript:;">Help</a></li>
<li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li> <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log
Out</a></li>
</ul> </ul>
</li> </li>
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false"> <a href="javascript:;" class="dropdown-toggle info-number"
data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i> <i class="fa fa-envelope-o"></i>
<span class="badge bg-green">6</span> <span class="badge bg-green">6</span>
</a> </a>
@ -274,24 +285,28 @@
<!-- /top navigation --> <!-- /top navigation -->
<!-- page content --> <!-- page content -->
<div class="right_col" role="main"> <div class="col-lg-12 right_col" role="main">
<div class=""> <div class="">
<div class="page-title"> <div class="page-title row">
<div class="title_left"> <div class="col-lg-6 text-left">
<h3>Users <small>Some examples to get you started</small></h3> <h3>Users
<small>Some examples to get you started</small>
</h3>
</div> </div>
<div class="title_right"> <div class="col-lg-6 text-right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> <div class="row">
<div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button> <button class="btn btn-light" type="button">Go!</button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -299,12 +314,15 @@
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Default Example <small>Users</small></h2> <h2>Default Example
<small>Users</small>
</h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a> <li><a href="#">Settings 1</a>
</li> </li>
@ -319,7 +337,9 @@
</div> </div>
<div class="x_content"> <div class="x_content">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code> DataTables has most features enabled by default, so all you need to do
to use it with your own tables is to call the construction function:
<code>$().DataTable();</code>
</p> </p>
<table id="datatable" class="table table-striped table-bordered"> <table id="datatable" class="table table-striped table-bordered">
<thead> <thead>
@ -805,7 +825,8 @@
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a> <li><a href="#">Settings 1</a>
</li> </li>
@ -820,9 +841,12 @@
</div> </div>
<div class="x_content"> <div class="x_content">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code> DataTables has most features enabled by default, so all you need to do
to use it with your own tables is to call the construction function:
<code>$().DataTable();</code>
</p> </p>
<table id="datatable-checkbox" class="table table-striped table-bordered bulk_action"> <table id="datatable-checkbox"
class="table table-striped table-bordered bulk_action">
<thead> <thead>
<tr> <tr>
<th> <th>
@ -1475,12 +1499,15 @@
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Button Example <small>Users</small></h2> <h2>Button Example
<small>Users</small>
</h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a> <li><a href="#">Settings 1</a>
</li> </li>
@ -1495,7 +1522,10 @@
</div> </div>
<div class="x_content"> <div class="x_content">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built. The Buttons extension for DataTables provides a common set of options,
API methods and styling to display buttons on a page that will interact
with a DataTable. The core library provides the based framework upon
which plug-ins can built.
</p> </p>
<table id="datatable-buttons" class="table table-striped table-bordered"> <table id="datatable-buttons" class="table table-striped table-bordered">
<thead> <thead>
@ -1976,12 +2006,15 @@
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Fixed Header Example <small>Users</small></h2> <h2>Fixed Header Example
<small>Users</small>
</h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a> <li><a href="#">Settings 1</a>
</li> </li>
@ -1996,9 +2029,11 @@
</div> </div>
<div class="x_content"> <div class="x_content">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
This example shows FixedHeader being styling by the Bootstrap CSS framework. This example shows FixedHeader being styling by the Bootstrap CSS
framework.
</p> </p>
<table id="datatable-fixed-header" class="table table-striped table-bordered"> <table id="datatable-fixed-header"
class="table table-striped table-bordered">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -2477,12 +2512,15 @@
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>KeyTable example <small>Users</small></h2> <h2>KeyTable example
<small>Users</small>
</h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a> <li><a href="#">Settings 1</a>
</li> </li>
@ -2500,10 +2538,13 @@
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card-box table-responsive"> <div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells. KeyTable provides Excel like cell navigation on any table.
Events (focus, blur, action etc) can be assigned to
individual cells, columns, rows or all cells.
</p> </p>
<table id="datatable-keytable" class="table table-striped table-bordered"> <table id="datatable-keytable"
class="table table-striped table-bordered">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -2985,12 +3026,15 @@
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Responsive example<small>Users</small></h2> <h2>Responsive example
<small>Users</small>
</h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a> <li><a href="#">Settings 1</a>
</li> </li>
@ -3005,10 +3049,14 @@
</div> </div>
<div class="x_content"> <div class="x_content">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table. Responsive is an extension for DataTables that resolves that problem by
optimising the table's layout for different screen sizes through the
dynamic insertion and removal of columns from the table.
</p> </p>
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> <table id="datatable-responsive"
class="table table-striped table-bordered dt-responsive nowrap"
cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -3663,7 +3711,7 @@
<!-- /page content --> <!-- /page content -->
<!-- footer content --> <!-- footer content -->
<footer> <footer class="col-lg-12">
<div class="pull-right"> <div class="pull-right">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a> Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div> </div>
@ -3672,9 +3720,14 @@
<!-- /footer content --> <!-- /footer content -->
</div> </div>
</div> </div>
</div>
</div>
</div>
<!-- jQuery --> <!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script> <script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Popper -->
<script src="../vendors/popper/popper.min.js"></script>
<!-- Bootstrap --> <!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script> <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick --> <!-- FastClick -->
@ -3685,9 +3738,9 @@
<script src="../vendors/iCheck/icheck.min.js"></script> <script src="../vendors/iCheck/icheck.min.js"></script>
<!-- Datatables --> <!-- Datatables -->
<script src="../vendors/datatables.net/js/jquery.dataTables.min.js"></script> <script src="../vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> <script src="../vendors/datatables.net-bs/js/dataTables.bootstrap4.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script> <script src="../vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script> <script src="../vendors/datatables.net-buttons-bs/js/buttons.bootstrap4.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/buttons.flash.min.js"></script> <script src="../vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../vendors/pdfmake/build/pdfmake.min.js"></script> <script src="../vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/buttons.html5.min.js"></script> <script src="../vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
@ -3695,13 +3748,13 @@
<script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script> <script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script> <script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="../vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script> <script src="../vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script> <script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap4.js"></script>
<script src="../vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script> <script src="../vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="../vendors/jszip/dist/jszip.min.js"></script> <script src="../vendors/jszip/dist/jszip.min.js"></script>
<script src="../vendors/pdfmake/build/vfs_fonts.js"></script> <script src="../vendors/pdfmake/build/vfs_fonts.js"></script>
<!-- Custom Theme Scripts --> <!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script> <script src="../build/js/custom.js"></script>
</body> </body>
</html> </html>