Update tables_dynamic.html

This commit is contained in:
razvanaldea89 2019-02-15 13:46:49 +02:00
parent 465f967bfd
commit b51b6e469f

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
@ -20,18 +20,20 @@
<!-- Datatables -->
<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-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-scroller-bs/css/scroller.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.bootstrap4.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-scroller-bs/css/scroller.bootstrap4.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<link href="../build/css/custom.css" rel="stylesheet">
<link href="../build/css/style-extra-bs4.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<body class="nav-md">
<div class="body">
<div class="main_container container-fluid">
<div class="row">
<div class="col-lg-2 left_col">
<div class="left_col">
<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>
@ -51,7 +53,7 @@
</div>
<!-- /menu profile quick info -->
<br />
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
@ -75,7 +77,8 @@
<li><a href="form_buttons.html">Form Buttons</a></li>
</ul>
</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">
<li><a href="general_elements.html">General Elements</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>
</ul>
</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">
<li><a href="chartjs.html">Chart JS</a></li>
<li><a href="chartjs2.html">Chart JS2</a></li>
@ -114,7 +118,8 @@
<div class="menu_section">
<h3>Live On</h3>
<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">
<li><a href="e_commerce.html">E-commerce</a></li>
<li><a href="projects.html">Projects</a></li>
@ -133,7 +138,8 @@
<li><a href="pricing_tables.html">Pricing Tables</a></li>
</ul>
</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">
<li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
@ -150,7 +156,8 @@
</li>
</ul>
</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>
</div>
@ -175,9 +182,10 @@
<!-- /menu footer buttons -->
</div>
</div>
<div class="col-lg-10">
<div class="row">
<!-- top navigation -->
<div class="top_nav">
<div class="col-lg-12 top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
@ -186,7 +194,8 @@
<ul class="nav navbar-nav navbar-right">
<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
<span class=" fa fa-angle-down"></span>
</a>
@ -199,19 +208,21 @@
</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>
</li>
<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>
<span class="badge bg-green">6</span>
</a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
@ -223,7 +234,7 @@
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
@ -235,7 +246,7 @@
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
@ -247,7 +258,7 @@
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
@ -274,24 +285,28 @@
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<div class="col-lg-12 right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Users <small>Some examples to get you started</small></h3>
<div class="page-title row">
<div class="col-lg-6 text-left">
<h3>Users
<small>Some examples to get you started</small>
</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="col-lg-6 text-right">
<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">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-light" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
@ -299,12 +314,15 @@
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<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">
<li><a href="#">Settings 1</a>
</li>
@ -319,7 +337,9 @@
</div>
<div class="x_content">
<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>
<table id="datatable" class="table table-striped table-bordered">
<thead>
@ -805,7 +825,8 @@
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<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">
<li><a href="#">Settings 1</a>
</li>
@ -820,9 +841,12 @@
</div>
<div class="x_content">
<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>
<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>
<tr>
<th>
@ -1475,12 +1499,15 @@
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<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">
<li><a href="#">Settings 1</a>
</li>
@ -1495,7 +1522,10 @@
</div>
<div class="x_content">
<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>
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
@ -1976,12 +2006,15 @@
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<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">
<li><a href="#">Settings 1</a>
</li>
@ -1996,9 +2029,11 @@
</div>
<div class="x_content">
<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>
<table id="datatable-fixed-header" class="table table-striped table-bordered">
<table id="datatable-fixed-header"
class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
@ -2477,12 +2512,15 @@
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<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">
<li><a href="#">Settings 1</a>
</li>
@ -2500,10 +2538,13 @@
<div class="col-sm-12">
<div class="card-box table-responsive">
<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>
<table id="datatable-keytable" class="table table-striped table-bordered">
<table id="datatable-keytable"
class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
@ -2985,12 +3026,15 @@
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<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">
<li><a href="#">Settings 1</a>
</li>
@ -3005,10 +3049,14 @@
</div>
<div class="x_content">
<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>
<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>
<tr>
<th>First name</th>
@ -3663,7 +3711,7 @@
<!-- /page content -->
<!-- footer content -->
<footer>
<footer class="col-lg-12">
<div class="pull-right">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div>
@ -3672,36 +3720,41 @@
<!-- /footer content -->
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="../vendors/iCheck/icheck.min.js"></script>
<!-- Datatables -->
<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-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/js/buttons.flash.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.print.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-responsive/js/dataTables.responsive.min.js"></script>
<script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap.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/pdfmake/build/vfs_fonts.js"></script>
<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Popper -->
<script src="../vendors/popper/popper.min.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="../vendors/iCheck/icheck.min.js"></script>
<!-- Datatables -->
<script src="../vendors/datatables.net/js/jquery.dataTables.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-bs/js/buttons.bootstrap4.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/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/buttons.print.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-responsive/js/dataTables.responsive.min.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/jszip/dist/jszip.min.js"></script>
<script src="../vendors/pdfmake/build/vfs_fonts.js"></script>
<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="../build/js/custom.js"></script>
</body>
</body>
</html>