Options

Last updated: September 10th, 2022

Data infos

Table unique ID

tableID You can set an unique ID :

{
    // The id of the table
    tableID: 1,
}

Table Name

tableName You can set a name to the table :

{
    // The Name of the table
    tableName: 'Apollon',
}

"dist" root

distloc Set the location of the dist folder:

{
    // The location of the "dist" folder of font, svg, img...
    distloc: './dist/',
}

Data source

Data type

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 option

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},
}

Data url

ajaxurl This option is used set the location to the server side when you use datatype: 'ajax' or datatype: 'json'. So you have the JSON and AJAX sources :

{
    // URL of the PHP or JSON Files
    'ajaxurl' : './ajax/data.php?id=4',
}

Show data

Show mode

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',
}

HTML code

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 list

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', ...],
}

Number to show

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],
}
elegant icons

Sorting on load

tosort You can set content sorting on load, by column and direction:

{
    // Sort on content load
    tosort: ['id', 'asc'], // or 'desc'
}

Change content

Numeric sort

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'],
}

Binary data

trufalse Set columns to show like true and false icons:

{
    // Columns to show as True/False
    trufalse: ['col 2'],
}

To list

tolist Set columns to show like an ul list when the column contain an array:

{
    // Columns to show as list
    tolist: ['col 4'],
}

Buttons

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'
        )
    ), 
?>
elegant icons

Sort / Filter

Special sorting

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

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

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,
}

Export data

CSV

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, 
}

XML

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, 
}

PDF

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, 
}

SQL

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, 
}
Instance Theme

Apollon - Data analysis jQuery plugin

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.

View Demo

You can found Tomy vinci in Facebook and in Instagram