tableID You can set an unique ID :
{
// The id of the table
tableID: 1,
}
tableName You can set a name to the table :
{
// The Name of the table
tableName: 'Apollon',
}
distloc Set the location of the dist
folder:
{
// The location of the "dist" folder of font, svg, img...
distloc: './dist/',
}
datatype Set the data source, to get the content from html
, js
, ajax
, json
. there is more informations in the Get started page:
{
// Get data from: html, js, ajax, json
datatype: 'html',
}
data This option is used set the content when you get data source from datatype: 'js'
array, but you can use it to send POST
data to the server when you use datatype: 'ajax'
:
{
// Get data from JS array when {datatype: 'js'}
data: {...},
// Send data to the PHP file when {datatype: 'ajax'}
data: {date_min:32165487},
}
showmode This option is used set how to show your data html
, list
, html
. The Table and List are simple, but for the customed HTML code you must add an other option showcode
:
{
// show data as table, list, html
showmode: 'table',
}
showcode This option is used set the customed HTML code to use when showmode: 'html'
. You can see the following example and more informations in this page:
var html_code = '\
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">\
<div class="card text-center card-img-top-1">\
<img class="card-img-top w-100" src="./flags/[CODE].svg" alt="" width="242" height="161">\
<div class="card-body"> \
<h4 class="card-title mb-3">[NAME]</h4>\
<p class="card-text">[CAPITAL] - [ALPHA_3] phone: +[PHONE]</p>\
<a class="btn btn-primary btn-block" href="blog.html">[CONTINENT]</a>\
</div>\
</div>\
</div>\
';
{
// HTML code to use when showmode: 'html',
showcode: html_code,
}
columns When you use datatype: 'js'
, datatype: 'ajax'
or datatype: 'json'
, you have to specify the table or list columns by the "columns" option:
{
// The columns list of the table
columns: ['id', 'name', ...],
}
toshow This option is used to set the number of items to show per page select list:
{
// Number of items to show per page
toshow: [10,25,50,100,200,500],
}
tosort You can set content sorting on load, by column and direction:
{
// Sort on content load
tosort: ['id', 'asc'], // or 'desc'
}
sortnbr Set columns to sort like numeric values, for example in string sorting 1, 12, 2, 25, 9 But in numeric order 1, 2, 9, 12, 25:
{
// Columns to sort as number (numeric sort)
sortnbr: ['col 1', 'col 3'],
}
trufalse Set columns to show like true
and false
icons:
{
// Columns to show as True/False
trufalse: ['col 2'],
}
tolist Set columns to show like an ul
list when the column contain an array
:
{
// Columns to show as list
tolist: ['col 4'],
}
action This option is important, it's used to replace a column by button:
{
// Columns to show as button to do actions
action: ['Do Something'],
}
In a PHP file for example the column must return the following code:
<?php
'ID' => 5,
'Do Something' => array(
array(
'id' => 'btn-5',
'content' =>'<i class="ti-pencil white-ico"></i>',
'click' => 'window.open(\'page?i=5\', \'_blank\').focus()',
'color' => 'info'
),
array(
'id' => 'btn-'.$Num,
'content' => '<i class="ti-file white-ico"></i>',
'click' => 'window.open(\'page?i=3\', \'_blank\').focus()',
'color' => 'warning'
)
),
?>
specialsort This option is used to change any column sorting, for example the column "Date" with a string value '02/04/1991', but you can add a column to the array "sort_Date" with timestamp '321659875', and when you do sorting to the "Date" column, Apollon will sort the "sort_Date" column:
{
// Sort the columns 'Col' and 'Col 2' with the 'sort_Col' and 'sort_Col 2' values
specialsort: ['Col', 'Col 2'],
}
filters You can add dynamic filters in the sidebar to Apollon on load, the content will be automatically added:
{
// Add filters sidebar from the columns set in filters option
filters: ['Col', 'Col 2'],
}
filterMaxNum When you add dynamic filters, the content will be automatically added, but a filter can have lot of values, so you can limit them with this option:
{
// Max number of values to show in filter
filterMaxNum: 20,
}
exportCSV This option is used to add export CSV
to the menu, if the Table Export plugin is included:
{
// Add export as CSV file to the menu
exportCSV: true,
}
exportXML This option is used to add export XML
to the menu, if the Table Export plugin is included:
{
// Add export as XML file to the menu
exportXML: true,
}
exportPDF This option is used to add export PDF
to the menu, if the Table Export plugin and JSPDF plugin are included:
{
// Add export as PDF file to the menu
exportPDF: true,
}
exportSQL This option is used to add export SQL
to the menu, if the Table Export plugin is included:
{
// Add export as sql file to the menu
exportSQL: true,
}
Apollon is jquery plugin for data analysis and show from JS object to table, list or any HTML customed code, change order, show with pagination, create graphs, statistics and use dynamic filters, export parts of data...
this is the first version.