AdminLTE

https://github.com/ysshels/adminlte2
Admin
AdminLTE is a fully responsive admin template based on Bootstrap 3 framework, providing a highly...
Tokens:103,578
Snippets:1,294
Trust Score:4
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Example CKEditor Installation URL

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/ckeditor/README.md

An example of the URL to access the CKEditor samples page after installation.

```text
http://www.example.com/ckeditor/samples/index.html
```

--------------------------------

### Install AdminLTE with Composer

Source: https://github.com/ysshels/adminlte2/blob/master/README.md

Install the AdminLTE package using Composer. Specify the version constraint for compatibility.

```bash
composer require "almasaeed2010/adminlte=~2.0"
```

--------------------------------

### Install AdminLTE with Bower

Source: https://github.com/ysshels/adminlte2/blob/master/README.md

Install the AdminLTE package using the Bower package manager.

```bash
bower install admin-lte
```

--------------------------------

### Install AdminLTE with npm

Source: https://github.com/ysshels/adminlte2/blob/master/README.md

Install the AdminLTE package using the npm package manager. Use the --save flag to add it to your project's dependencies.

```bash
npm install --save admin-lte
```

--------------------------------

### Verify CKEditor Installation

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/ckeditor/README.md

Use this URL to check if CKEditor has been installed correctly. Replace placeholders with your actual site and installation path.

```text
http://<your site>/<CKEditor installation path>/samples/index.html
```

--------------------------------

### Sparkline Bar Chart Examples

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html

Shows how to create bar charts using inline HTML data and how to format tooltips with custom value lookups.

```javascript
 $('.sparkbar').sparkline('html', {
    type: 'bar'
});
```

```javascript
 $('.barformat').sparkline(
    [1, 3, 5, 3, 8],
    {
        type: 'bar',
        tooltipFormat: '{{value:levels}} - {{value}}',
        tooltipValueLookups: {
            levels: $.range_map({
                ':2': 'Low',
                '3:6': 'Medium',
                '7:': 'High'
            })
        }
    }
);
```

--------------------------------

### Solid Box Examples

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

Demonstrates the usage of solid boxes with different color variations. These boxes are used to group content with a distinct background color.

```HTML
<div class="box box-solid box-default">...</div>
```

```HTML
<div class="box box-solid box-primary">...</div>
```

```HTML
<div class="box box-solid box-info">...</div>
```

```HTML
<div class="box box-solid box-warning">...</div>
```

```HTML
<div class="box box-solid box-success">...</div>
```

```HTML
<div class="box box-solid box-danger">...</div>
```

--------------------------------

### Expandable Box Example (Initially Collapsed)

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

A box that is initially collapsed and can be expanded. It uses the 'collapsed-box' class and a collapse button with a plus icon.

```HTML
<div class="box box-default collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Expandable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->
```

--------------------------------

### Morris.js Donut Chart Example

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/morris.html

Generates a Donut chart to visualize proportions of a whole. This example shows sales data categorized into download, in-store, and mail-order.

```javascript
var donut = new Morris.Donut({
  element: 'sales-chart',
  resize: true,
  colors: ["#3c8dbc", "#f56954", "#00a65a"],
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ],
  hideHover: 'auto'
});
```

--------------------------------

### Morris.js Bar Chart Example

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/morris.html

Implements a Bar chart to compare values across categories. This example displays CPU and Disk usage over several years.

```javascript
var bar = new Morris.Bar({
  element: 'bar-chart',
  resize: true,
  data: [
    {y: '2006', a: 100, b: 90},
    {y: '2007', a: 75, b: 65},
    {y: '2008', a: 50, b: 40},
    {y: '2009', a: 75, b: 65},
    {y: '2010', a: 50, b: 40},
    {y: '2011', a: 75, b: 65},
    {y: '2012', a: 100, b: 90}
  ],
  barColors: ['#00a65a', '#f56954'],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['CPU', 'DISK'],
  hideHover: 'auto'
});
```

--------------------------------

### Direct Chat with Solid Box

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

This example demonstrates how to apply the 'solid-box' class to the Direct Chat component for a different visual style. The core structure and functionality remain the same.

```html
<div class="box box-danger solid-box direct-chat direct-chat-danger">
  <div class="box-header with-border">
    <h3 class="box-title">Direct Chat</h3>
    <div class="box-tools pull-right">
      <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
      <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
    </div>
  </div><!-- /.box-header -->
  <div class="box-body">
    <div class="direct-chat-messages">
      <div class="direct-chat-msg">
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-name pull-left">Alexander Pierce</span>
          <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
        </div><!-- /.direct-chat-info -->
        <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          Is this template really for free? That's unbelievable!
        </div><!-- /.direct-chat-text -->
      </div><!-- /.direct-chat-msg -->
      <div class="direct-chat-msg right">
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-name pull-right">Sarah Bullock</span>
          <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
        </div><!-- /.direct-chat-info -->
        <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          You better believe it!
        </div><!-- /.direct-chat-text -->
      </div><!-- /.direct-chat-msg -->
    </div><!--/.direct-chat-messages-->
    <div class="direct-chat-contacts">
      <ul class="contacts-list">
        <li>
          <a href="#">
            <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
            <div class="contacts-list-info">
              <span class="contacts-list-name">
                Count Dracula
                <small class="contacts-list-date pull-right">2/28/2015</small>
              </span>
              <span class="contacts-list-msg">How have you been? I was...</span>
            </div><!-- /.contacts-list-info -->
          </a>
        </li><!-- End Contact Item -->
      </ul><!-- /.contatcts-list -->
    </div><!-- /.direct-chat-pane -->
  </div><!-- /.box-body -->
  <div class="box-footer">
    <div class="input-group">
      <input type="text" name="message" placeholder="Type Message ..." class="form-control">
      <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-flat">Send</button>
      </span>
    </div>
  </div><!-- /.box-footer-->
</div><!--/.direct-chat -->
```

--------------------------------

### Sparkline Discrete Chart Examples

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html

Illustrates discrete charts, suitable for showing individual data points. Examples include basic usage and charts with a threshold indicator.

```javascript
 $('.discrete1').sparkline('html', {
    type: 'discrete',
    lineColor: 'blue',
    xwidth: 18
});
```

```javascript
 $('#discrete2').sparkline('html', {
    type: 'discrete',
    lineColor: 'blue',
    thresholdColor: 'red',
    thresholdValue: 4
});
```

--------------------------------

### Initialize KeyTable on Plain HTML Table

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/KeyTable/examples/html.html

This Javascript code initializes KeyTable on an HTML table with the ID 'example' by adding the 'KeyTable' class and then instantiating KeyTable. This method is deprecated.

```javascript
$(document).ready(function() { $('#example').addClass('KeyTable'); new $.fn.dataTable.KeyTable(); } );
```

--------------------------------

### Sparkline Tri-state Chart Examples

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html

Demonstrates tri-state charts, which are useful for showing positive, negative, or neutral values. Includes examples with default and custom color maps.

```javascript
 $('.sparktristate').sparkline('html', {
    type: 'tristate'
});
```

```javascript
 $('.sparktristatecols').sparkline('html', {
    type: 'tristate',
    colorMap: {
        '-2': '#fa7',
        '2': '#44f'
    }
});
```

--------------------------------

### Initialize AutoFill

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/AutoFill/Readme.txt

Initializes the AutoFill extension for a DataTable instance. This is the basic setup required to enable the AutoFill functionality.

```javascript
$(document).ready( function () {
    var table = $('#example').dataTable();
    new $.fn.dataTable.AutoFill( table );
} );
```

--------------------------------

### Profit Margin Chart Initialization

Source: https://github.com/ysshels/adminlte2/blob/master/test.html

Initializes a profit margin bar chart using Chart.js. This example reuses the same data and options as the general bar chart.

```javascript
var profitChartCanvas = $("#profit-margin").get(0).getContext("2d");
var profitChart = new Chart(profitChartCanvas);
profitChart.Bar(barChartData, barChartOptions);
```

--------------------------------

### Sparkline Line Chart Examples

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html

Demonstrates various line chart configurations, including basic inline data, larger charts, customized appearance, and normal range indicators.

```javascript
$('.sparkline-1').sparkline();
```

```javascript
$('.largeline').sparkline('html', {
    type: 'line',
    height: '2.5em',
    width: '4em'
});
```

```javascript
$('#linecustom').sparkline('html', {
    height: '1.5em',
    width: '8em',
    lineColor: '#f00',
    fillColor: '#ffa',
    minSpotColor: false,
    maxSpotColor: false,
    spotColor: '#77f',
    spotRadius: 3
});
```

```javascript
$('#normalline').sparkline('html', {
    fillColor: false,
    normalRangeMin: -1,
    normalRangeMax: 8
});
```

```javascript
$('#normalExample').sparkline('html', {
    fillColor: false,
    normalRangeMin: 80,
    normalRangeMax: 95,
    normalRangeColor: '#4f4'
});
```

--------------------------------

### Initialize Plugin Communication

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/ckeditor/plugins/wsc/dialogs/ciframe.html

Sets an interval to periodically send data to the master and starts listening for post messages. This function is typically called on window load.

```javascript
function onLoad() {
  interval = window.setInterval( sendData2Master, 100 );
  listenPostMessage();
}
```

--------------------------------

### Configure Ion Range Slider (Default)

Source: https://github.com/ysshels/adminlte2/blob/master/pages/UI/sliders.html

Initializes an Ion Range Slider with default configuration. This is useful for quick setup when default values are sufficient.

```javascript
$("#range_2").ionRangeSlider();
```

--------------------------------

### Box Variants Markup

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

Examples of different box variants using contextual classes like box-default, box-primary, box-info, etc.

```html
<div class="box box-default">...</div>
<div class="box box-primary">...</div>
<div class="box box-info">...</div>
<div class="box box-warning">...</div>
<div class="box box-success">...</div>
<div class="box box-danger">...</div>
```

--------------------------------

### Sidebar Construction Example

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

This HTML structure defines the main sidebar. It includes optional user panels, search forms, and a hierarchical menu structure with support for multilevel links.

```html
<div class="main-sidebar">
  <!-- Inner sidebar -->
  <div class="sidebar">
    <!-- user panel (Optional) -->
    <div class="user-panel">
      <div class="pull-left image">
        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
      </div>
      <div class="pull-left info">
        <p>User Name</p>

        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
      </div>
    </div><!-- /.user-panel -->

    <!-- Search Form (Optional) -->
    <form action="#" method="get" class="sidebar-form">
      <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="Search...">
        <span class="input-group-btn">
          <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
        </span>
      </div>
    </form><!-- /.sidebar-form -->

    <!-- Sidebar Menu -->
    <ul class="sidebar-menu">
      <li class="header">HEADER</li>
      <!-- Optionally, you can add icons to the links -->
      <li class="active"><a href="#"><span>Link</span></a><</li>
      <li><a href="#"><span>Another Link</span></a></li>
      <li class="treeview">
        <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">
          <li><a href="#">Link in level 2</a></li>
          <li><a href="#">Link in level 2</a></li>
        </ul>
      </li>
    </ul><!-- /.sidebar-menu -->

  </div><!-- /.sidebar -->
</div><!-- /.main-sidebar -->
```

--------------------------------

### Define Global AdminLTE JavaScript Options

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/index.html

Define a global JavaScript variable `AdminLTEOptions` before loading `app.js` to configure AdminLTE behavior. This example shows how to enable sidebar expand on hover, box refresh, and Bootstrap tooltips.

```html
<script>
  var AdminLTEOptions = {
    //Enable sidebar expand on hover effect for sidebar mini
    //This option is forced to true if both the fixed layout and sidebar mini
    //are used together
    sidebarExpandOnHover: true,
    //BoxRefresh Plugin
    enableBoxRefresh: true,
    //Bootstrap.js tooltip
    enableBSToppltip: true
  };
</script>
<script src="dist/js/app.js" type="text/javascript"></script>
```

--------------------------------

### KeyTable Event Handling Example

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/KeyTable/examples/events.html

This JavaScript code initializes a DataTables instance and then sets up a KeyTable instance. It defines event handlers for focus, blur, and action events on specific cells or rows/columns using coordinates and DOM nodes. An auxiliary function `eventMsg` is used to log event details to an info div.

```javascript
function eventMsg ( msg ) {
    var n = document.getElementById('info');
    n.innerHTML += msg+"<br>";
    n.scrollTop = n.scrollHeight;
}

$(document).ready(function() {
    var table = $('#example').DataTable();
    var keys = new $.fn.dataTable.KeyTable( table );

    /* Focus handler for all cells in last column */
    keys.event.focus( 4, null, function( node, x, y ) {
        eventMsg( "Cell "+x+","+y+" focused ('live' event - column)" );
    } );

    /* Focus handler for all cells in 8th row */
    keys.event.focus( null, 7, function( node, x, y ) {
        eventMsg( "Cell "+x+","+y+" focused ('live' event - row)" );
    } );

    /* Focus using coords. */
    keys.event.focus( 1, 0, function( node ) {
        keys.event.remove.focus( node );
        eventMsg( "Cell 1,0 focus - this event has now been removed" );
    } );

    keys.event.focus( 1, 3, function() {
        eventMsg( "Cell 1,3 focus" );
    } );

    /* focus with a node */
    keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')\[0\] , function() {
        eventMsg( "Cell 0,2 focus" );
    } );

    /* Blur using a node */
    keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')\[0\] , function() {
        eventMsg( "Cell 1,2 blur" );
    } );

    /* Blur using coords */
    keys.event.blur( 2, 4, function() {
        eventMsg( "Cell 2,4 blur" );
    } );

    /* Action */
    keys.event.action( 2, 2, function( node ) {
        eventMsg( "Cell 2,2 action" );
        if ( node.style.fontWeight == "" || node.style.fontWeight == "normal" ) {
            node.style.fontWeight = "bold";
        } else {
            node.style.fontWeight = "normal";
        }
    } );

    keys.event.action( 2, 5, function( node ) {
        eventMsg( "Cell 2,5 action" );
        if ( node.style.fontStyle == "" ) {
            node.style.fontStyle = "italic";
        } else {
            node.style.fontStyle = "";
        }
    } );
} );
```

--------------------------------

### Available AdminLTE Options

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/adminlte-options.html

A comprehensive list of available AdminLTE options for customization. Ensure required plugins like SlimScroll are loaded before app.js if options depend on them.

```javascript
{
  //Add slimscroll to navbar menus
  //This requires you to load the slimscroll plugin
  //in every page before app.js
  navbarMenuSlimscroll: true,
  navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
  navbarMenuHeight: "200px", //The height of the inner menu
  //General animation speed for JS animated elements such as box collapse/expand and
  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
  //'fast', 'normal', or 'slow'
  animationSpeed: 500,
  //Sidebar push menu toggle button selector
  sidebarToggleSelector: "[data-toggle='offcanvas']",
  //Activate sidebar push menu
  sidebarPushMenu: true,
  //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
  sidebarSlimScroll: true,
  //Enable sidebar expand on hover effect for sidebar mini
  //This option is forced to true if both the fixed layout and sidebar mini
  //are used together
  sidebarExpandOnHover: false,
  //BoxRefresh Plugin
  enableBoxRefresh: true,
  //Bootstrap.js tooltip
  enableBSToppltip: true,
  BSTooltipSelector: "[data-toggle='tooltip']",
  //Enable Fast Click. Fastclick.js creates a more
  //native touch experience with touch devices. If you
  //choose to enable the plugin, make sure you load the script
  //before AdminLTE's app.js
  enableFastclick: true,
  //Control Sidebar Options
  enableControlSidebar: true,
  controlSidebarOptions: {
    //Which button should trigger the open/close event
    toggleBtnSelector: "[data-toggle='control-sidebar']",
    //The sidebar selector
    selector: ".control-sidebar",
    //Enable slide over content
    slide: true
  },
  //Box Widget Plugin. Enable this plugin
  //to allow boxes to be collapsed and/or removed
  enableBoxWidget: true,
  //Box Widget plugin options
  boxWidgetOptions: {
    boxWidgetIcons: {
      //Collapse icon
      collapse: 'fa-minus',
      //Open icon
      open: 'fa-plus',
      //Remove icon
      remove: 'fa-times'
    },
    boxWidgetSelectors: {
      //Remove button selector
      remove: '[data-widget="remove"]',
      //Collapse button selector
      collapse: '[data-widget="collapse"]'
    }
  },
  //Direct Chat plugin options
  directChat: {
    //Enable direct chat by default
    enable: true,
    //The button to open and close the chat contacts pane
    contactToggleSelector: '[data-widget="chat-pane-toggle"]'
  },
  //Define the set of colors to use globally around the website
  colors: {
    lightBlue: "#3c8dbc",
    red: "#f56954",
    green: "#00a65a",
    aqua: "#00c0ef",
    yellow: "#f39c12",
    blue: "#0073b7",
    navy: "#001F3F",
    teal: "#39CCCC",
    olive: "#3D9970",
    lime: "#01FF70",
    orange: "#FF851B",
    fuchsia: "#F012BE",
    purple: "#8E24AA",
    maroon: "#D81B60",
    black: "#222222",
    gray: "#d2d6de"
  },
  //The standard screen sizes that bootstrap uses.
  //If you change these in the variables.less file, change
  //them here too.
  screenSizes: {
    xs: 480,
    sm: 768,
    md: 992,
    lg: 1200
  }
}
```

--------------------------------

### Sparkline Box Plot Examples

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html

Provides examples of box plots, including raw data input and options for showing outliers and specifying tooltip field order.

```javascript
 $('.sparkboxplot').sparkline('html', {
    type: 'box'
});
```

```javascript
 $('.sparkboxplotraw').sparkline(
    [1, 3, 5, 8, 10, 15, 18],
    {
        type: 'box',
        raw: true,
        showOutliers: true,
        target: 6
    }
);
```

```javascript
 $('.boxfieldorder').sparkline('html', {
    type: 'box',
    tooltipFormatFieldlist: ['med', 'lq', 'uq'],
    tooltipFormatFieldlistKey: 'field'
});
```

--------------------------------

### Initialize DataTables with Responsive

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/Responsive/examples/display-control/auto.html

Initializes a DataTable with the Responsive extension enabled. This allows for automatic column hiding based on screen size.

```javascript
$(document).ready(function() {
    $('#example').DataTable();
} );
```

--------------------------------

### Server-side Processing Script (PHP Example)

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/ColReorder/examples/colvis.html

An example server-side processing script using PHP for DataTables. This script handles data retrieval and filtering for dynamic tables. Adapt this to your server-side language and environment.

```php
<?php

/*
 * Script: server_processing.php
 * Purpose: DataTables server-side processing script for example features
 */

// Ensure you have the correct includes for your DataTables version and server environment

// Example implementation (replace with your actual database connection and query logic)

// Define columns
$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );

// DB table to use (replace with your actual table name)
$sTable = "ajax";

/* 
 * Database connection and general setup
 */
$gaSql['user']   = "root";
$gaSql['password'] = "";
$gaSql['db']     = "test";
$gaSql['server'] = "localhost";


/* 
 * MySQL connection
 */
$db = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or die( 'Could not open connection to server' );
mysql_select_db( $gaSql['db'], $db ) or die( 'Could not select database ' );


/* 
 * MySQL set of characters
 */
mysql_query( "SET NAMES 'utf8'" ) or die( 'Could not set character set' );


/* 
 * Paging
 */
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
	$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
		intval( $_GET['iDisplayLength'] );
}


/*
 * Ordering
 */
$sOrder = "";
if ( isset( $_GET['iSortCol_0'] ) )
{
	$sOrder = "ORDER BY  ";
	for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
	{
		if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
		{
			$sOrder .= "`" . $aColumns[ intval($_GET['iSortCol_'.$i]) ] . "` " ;
			$sOrder .= ( $_GET['sSortDir_'.$i] === "asc" ) ? "asc" : "desc";
		}
	}
}


/* 
 * Filtering
 * NOTE this does not match the built-in DataTables filtering which does it scannably with SQL LIKE queries
 * for performance reasons. This is used more as an example of how one might do filtering on the server-side
 */
$sWhere = "";
if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
{
	$sWhere = "WHERE (";
	for ( $i=0 ; $i<count($aColumns) ; $i++ )
	{
		$sWhere .= "`" . $aColumns[$i] . "` LIKE " . "'%" . mysql_real_escape_string( $_GET['sSearch'] ) . "%' OR ";
	}
	$sWhere = substr_replace( $sWhere, "", -3 );
	$sWhere .= ")";
}

/* Individual column filtering */
$sWhereSub = "";
if ( isset($_GET['sSearch_0']) && $_GET['sSearch_0'] != "" )
{
	if ( $sWhereSub == "" )
	{
		$sWhereSub = "WHERE ";
	}
	else
	{
		$sWhereSub .= " AND ";
	}
	$sWhereSub .= "`" . $aColumns[0] . "` LIKE '%".mysql_real_escape_string($_GET['sSearch_0']).
```

--------------------------------

### Removable Box Example

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

A box that can be removed from the DOM using the remove widget.

```HTML
<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Removable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->
```

--------------------------------

### Initialize Color Picker with Addon

Source: https://github.com/ysshels/adminlte2/blob/master/pages/forms/advanced.html

Initializes the color picker plugin for an element with the class 'my-colorpicker2', including an addon.

```javascript
//color picker with addon
$(".my-colorpicker2").colorpicker();
```

--------------------------------

### Collapsable Box Example

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

A standard box that can be collapsed and expanded using the collapse widget.

```HTML
<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Collapsable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->
```

--------------------------------

### Initialize CKEditor

Source: https://github.com/ysshels/adminlte2/blob/master/pages/forms/editors.html

Replace a textarea with a CKEditor instance using default configuration. Ensure CKEditor is loaded before calling this.

```javascript
$(function () { // Replace the <textarea id="editor1"> with a CKEditor // instance, using default configuration. CKEDITOR.replace('editor1'); });
```

--------------------------------

### Initialize Bootstrap Slider

Source: https://github.com/ysshels/adminlte2/blob/master/pages/UI/sliders.html

Initializes the Bootstrap slider plugin on elements with the class 'slider'. This is a basic setup for a single slider.

```javascript
$(function () { /* BOOTSTRAP SLIDER */ $('.slider').slider();
```

--------------------------------

### Initialize KeyTable

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/KeyTable/examples/simple.html

This snippet shows the basic JavaScript required to initialize KeyTable on a DataTable. Ensure jQuery, DataTables, and KeyTable libraries are loaded.

```javascript
$(document).ready(function() { var table = $('#example').DataTable(); new $.fn.dataTable.KeyTable( table ); } );
```

--------------------------------

### jQueryKnob Initialization

Source: https://github.com/ysshels/adminlte2/blob/master/test.html

Initializes the jQueryKnob plugin on elements with the class 'knob'. The example includes a custom 'draw' function for the 'tron' skin.

```javascript
$(".knob").knob({
    draw: function () {
        if (this.$.data('skin') == 'tron') {
            var a = this.angle(this.cv) // Angle ,
                sa = this.startAngle // Previous start angle ,
                sat = this.startAngle // Start angle ,
                ea // Previous end angle ,
                eat = sat + a // End angle ,
                r = true;
            this.g.lineWidth = this.lineWidth;
            this.o.cursor && (sat = eat - 0.3) && (eat = eat + 0.3);
            if (this.o.displayPrevious) {
                ea = this.startAngle + this.angle(this.value);
                this.o.cursor && (sa = ea - 0.3) && (ea = ea + 0.3);
                this.g.beginPath();
                this.g.strokeStyle = this.previousColor;
                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                this.g.stroke();
            }
            this.g.beginPath();
            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
            this.g.stroke();
            this.g.lineWidth = 2;
            this.g.beginPath();
            this.g.strokeStyle = this.o.fgColor;
            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
            this.g.stroke();
            return false;
        }
    }
});
```

--------------------------------

### Solid Box Variants Markup

Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html

Examples of solid box variants, created by adding the 'box-solid' class along with contextual classes.

```html
<div class="box box-default box-solid">...</div>
<div class="box box-primary box-solid">...</div>
```

--------------------------------

### Initialize Basic DataTable

Source: https://github.com/ysshels/adminlte2/blob/master/pages/tables/data.html

Initializes a DataTable with default settings. Use this for simple table displays.

```javascript
$(function () {
  $("#example1").DataTable();
});
```

--------------------------------

### Initialize DataTable with ColVis Restore/Show All Options

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/ColVis/examples/restore.html

Initializes a DataTables instance with the ColVis extension enabled. It configures custom text for the 'Restore', 'Show all', and 'Show none' buttons and hides the third column by default.

```javascript
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'C<"clear">lfrtip',
        columnDefs: [
            { visible: false, targets: 2 }
        ],
        colVis: {
            restore: "Restore",
            showAll: "Show all",
            showNone: "Show none"
        }
    } );
} );
```

--------------------------------

### jQuery Knob Initialization

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html

Initializes the jQuery Knob plugin for circular gauges. This snippet shows the basic setup and event handlers.

```javascript
$(function () { /* jQueryKnob */
    $(".knob").knob({
        /*change : function (value) {
            //console.log("change : " + value);
        }, 
        release : function (value) {
            console.log("release : " + value);
        }, 
        cancel : function () {
            console.log("cancel : " + this.value);
        },
        */
        draw: function () {
            // "tron" case
            if (this.$.data('skin') == 'tron') {
                var a = this.angle(this.cv) // Angle 
                , sa = this.startAngle // Previous start angle
                , sat = this.startAngle // Start angle
                , ea // Previous end angle
                , eat = sat + a // End angle
                , r = true;
                this.g.lineWidth = this.lineWidth;
                this.o.cursor && (sat = eat - 0.3) && (eat = eat + 0.3);
                if (this.o.displayPrevious) {
                    ea = this.startAngle + this.angle(this.value);
                    this.o.cursor && (sa = ea - 0.3) && (ea = ea + 0.3);
                    this.g.beginPath();
                    this.g.strokeStyle = this.previousColor;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                    this.g.stroke();
                }
                this.g.beginPath();
                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
                this.g.stroke();
                this.g.lineWidth = 2;
                this.g.beginPath();
                this.g.strokeStyle = this.o.fgColor;
                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                this.g.stroke();
                return false;
            }
        }
    });
    /* END JQUERY KNOB */
    //INITIALIZE SPARKLINE CHARTS
    $(".sparkline").each(function () {
        var $this = $(this);
        $this.sparkline('html', $this.data());
    });
    /* SPARKLINE DOCUMENTATION EXAMPLES http://omnipotent.net/jquery.sparkline/#s-about */
    drawDocSparklines();
    drawMouseSpeedDemo();
});
```

--------------------------------

### Initialize DataTables and TableTools with Bootstrap Styling

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/TableTools/examples/bootstrap.html

This snippet initializes a DataTables instance and integrates TableTools with Bootstrap styling. It's recommended for scenarios where a consistent Bootstrap look is desired for DataTables and its export/copy features.

```javascript
$(document).ready(function() {
    var table = $('#example').DataTable();
    var tt = new $.fn.dataTable.TableTools( table );
    $( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
} );
```

--------------------------------

### Manual Responsive Initialization

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/Responsive/examples/initialisation/new.html

This snippet shows how to manually initialize the DataTables Responsive extension by creating a new instance of `$.fn.dataTable.Responsive` and passing the DataTable instance to its constructor. This is an alternative to automatic initialization or using configuration options.

```javascript
var table = $('#example').DataTable();
new $.fn.dataTable.Responsive( table );
```

--------------------------------

### Initialize DataTable with TableTools and OS Row Selection

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/TableTools/examples/select_os.html

Initializes a DataTable with the TableTools extension, configuring it for operating system-like row selection ('os') and adding 'select_all' and 'select_none' buttons.

```javascript
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'T<"clear">lfrtip',
        tableTools: {
            "sRowSelect": "os",
            "aButtons": [ "select_all", "select_none" ]
        }
    } );
} );
```

--------------------------------

### Sparkline Pie Chart

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html

Demonstrates how to create a simple pie chart using the Sparklines plugin with inline HTML data.

```javascript
 $('.sparkpie').sparkline('html', {
    type: 'pie',
    height: '1.0em'
});
```

--------------------------------

### Basic FixedColumns Initialization with Rowspan Header

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/FixedColumns/examples/rowspan.html

Initializes DataTables with scrolling enabled and then applies FixedColumns. This setup is compatible with tables featuring rowspan in their headers.

```javascript
$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false
    } );

    new $.fn.dataTable.FixedColumns( table );
} );
```

--------------------------------

### Clone AdminLTE Repository

Source: https://github.com/ysshels/adminlte2/blob/master/README.md

Clone the AdminLTE repository to your local machine using Git. Ensure you have forked the repository first.

```bash
git clone https://github.com/YOUR_USERNAME/AdminLTE.git
```

--------------------------------

### Get URL Parameters

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/ckeditor/plugins/wsc/dialogs/ciframe.html

Retrieves the value of a specified URL parameter from the current window's location. Used to parse command and data from the URL.

```javascript
function gup( name ) {
  name = name.replace( /\\\[\\\\\]/, '\\\\\\[' ).replace( /\\\[\\\\\]/, '\\\\\\\\\\]' ) ;
  var regexS = '(?:\[\\?&amp;\])' + name + '=(\[^&amp;#\]\*)\' ;
  var regex = new RegExp( regexS ) ;
  var results = regex.exec( window.location.href ) ;
  if ( !results || !results\[ 1 \]\] ) return '' ;
  else return decodeURIComponent( results\[ 1 \].replace( /\\\[\\\]/g, "@" ) );
}
```

--------------------------------

### Initialize DataTables with Column Control for Responsive Details

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/Responsive/examples/child-rows/right-column.html

Initializes a DataTable with the Responsive extension enabled, configuring the last column (`target: -1`) as the control for showing/hiding child row details. It also defines the last column with the class 'control' to visually indicate its function.

```javascript
$(document).ready(function() {
    $('#example').DataTable( {
        responsive: {
            details: {
                type: 'column',
                target: -1
            }
        },
        columnDefs: [
            {
                className: 'control',
                orderable: false,
                targets: -1
            }
        ]
    } );
} );
```

--------------------------------

### Morris.js Line Chart Example

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/morris.html

Creates a Line chart using Morris.js, suitable for displaying trends over time. The chart is responsive and configured with specific data and labels.

```javascript
var line = new Morris.Line({
  element: 'line-chart',
  resize: true,
  data: [
    {y: '2011 Q1', item1: 2666},
    {y: '2011 Q2', item1: 2778},
    {y: '2011 Q3', item1: 4912},
    {y: '2011 Q4', item1: 3767},
    {y: '2012 Q1', item1: 6810},
    {y: '2012 Q2', item1: 5670},
    {y: '2012 Q3', item1: 4820},
    {y: '2012 Q4', item1: 15073},
    {y: '2013 Q1', item1: 10687},
    {y: '2013 Q2', item1: 8432}
  ],
  xkey: 'y',
  ykeys: ['item1'],
  labels: ['Item 1'],
  lineColors: ['#3c8dbc'],
  hideHover: 'auto'
});
```

--------------------------------

### Create Monthly Sales Line Chart

Source: https://github.com/ysshels/adminlte2/blob/master/test.html

Generates a line chart to visualize monthly sales data, including electronics and digital goods. Requires Chart.js library.

```javascript
//-----------------------
//-- MONTHLY SALES CHART -
//-----------------------
// Get context with jQuery - using jQuery's .get() method.
var salesChartCanvas = $("#turnover-line").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var salesChart = new Chart(salesChartCanvas);

var salesChartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "Electronics",
      fillColor: "rgb(210, 214, 222)",
      strokeColor: "rgb(210, 214, 222)",
      pointColor: "rgb(210, 214, 222)",
      pointStrokeColor: "#c1c7d1",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgb(220,220,220)",
      data: [.650, .590, .800, .810, .560, .550, .400]
    },
    {
      label: "Digital Goods",
      fillColor: "#00a65a",
      strokeColor: "#00a65a",
      pointColor: "#00a65a",
      pointStrokeColor: "rgba(60,141,188,1)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(60,141,188,1)",
      data: [.280, .480, .400, .190, .860, .270, .900]
    }
  ]
};

var salesChartOptions = {
  //Boolean - If we should show the scale at all
  showScale: true,
  //Boolean - Whether grid lines are shown across the chart
  scaleShowGridLines: false,
  //String - Colour of the grid lines
  scaleGridLineColor: "rgba(0,0,0,.05)",
  //Number - Width of the grid lines
  scaleGridLineWidth: 1,
  //Boolean - Whether to show horizontal lines (except X axis)
  scaleShowHorizontalLines: true,
  //Boolean - Whether to show vertical lines (except Y axis)
  scaleShowVerticalLines: true,
  //Boolean - Whether the line is curved between points
  bezierCurve: true,
  //Number - Tension of the bezier curve between points
  bezierCurveTension: 0.3,
  //Boolean - Whether to show a dot for each point
  pointDot: false,
  //Number - Radius of each point dot in pixels
  pointDotRadius: 4,
  //Number - Pixel width of point dot stroke
  pointDotStrokeWidth: 1,
  //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
  pointHitDetectionRadius: 20,
  //Boolean - Whether to show a stroke for datasets
  datasetStroke: true,
  //Number - Pixel width of dataset stroke
  datasetStrokeWidth: 2,
  //Boolean - Whether to fill the dataset with a color
  datasetFill: false,
  //String - A legend template
  multiTooltipTemplate: "<%= value %>",
  //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
  maintainAspectRatio: true,
  //Boolean - whether to make the chart responsive to window resizing
  responsive: true
};

//Create the line chart
salesChart.Line(salesChartData, salesChartOptions);
```

--------------------------------

### Morris.js Area Chart Example

Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/morris.html

Initializes an Area chart with specified data, element, and styling options. Use for visualizing trends over time with multiple data series.

```javascript
$(function () {
  "use strict";

  // AREA CHART
  var area = new Morris.Area({
    element: 'revenue-chart',
    resize: true,
    data: [
      {y: '2011 Q1', item1: 2666, item2: 2666},
      {y: '2011 Q2', item1: 2778, item2: 2294},
      {y: '2011 Q3', item1: 4912, item2: 1969},
      {y: '2011 Q4', item1: 3767, item2: 3597},
      {y: '2012 Q1', item1: 6810, item2: 1914},
      {y: '2012 Q2', item1: 5670, item2: 4293},
      {y: '2012 Q3', item1: 4820, item2: 3795},
      {y: '2012 Q4', item1: 15073, item2: 5967},
      {y: '2013 Q1', item1: 10687, item2: 4460},
      {y: '2013 Q2', item1: 8432, item2: 5713}
    ],
    xkey: 'y',
    ykeys: ['item1', 'item2'],
    labels: ['Item 1', 'Item 2'],
    lineColors: ['#a0d0e0', '#3c8dbc'],
    hideHover: 'auto'
  });
});
```

--------------------------------

### Initialize DataTables with Scrolling and AutoFill

Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/AutoFill/examples/scrolling.html

Initializes a DataTables instance with vertical scrolling enabled and then attaches the AutoFill extension. This setup is necessary for the automatic scrolling feature to function.

```javascript
$(document).ready(function() {
    var table = $('#example').dataTable( {
        scrollY: 200,
        scrollCollapse: false,
        paginate: false
    } );

    new $.fn.dataTable.AutoFill( table );
} );
```
Tokens:
Raw