File: examples/index.php

Recommend this page to a friend!
  Classes of Joubert RedRat  >  PHP AJAX Table  >  examples/index.php  >  Download  
File: examples/index.php
Role: Example script
Content type: text/plain
Description: Example script
Class: PHP AJAX Table
Load HTML tables dynamically using AJAX
Author: By
Last change: Merge pull request #10 from joubertredrat/master

Add demo link on description and update example
Merge branch 'master' of
Date: 4 years ago
Size: 4,866 bytes


 * Example view to see AjaxTable in action!
 * @author Joubert <>
 * @copyright Copyright (c) 2016 Vector Internet Business and AjaxTable contributors
 * @license: MIT
 * @see
 * @see


 * AjaxTable is separated in two steps, create config and response request
 * On this step we is creating config for requests

 * For new AjaxTable, you instantiate and set params
$Conf = new VectorDev\AjaxTable\Conf('numbers.php');
$Conf->addParam('action', 'list');

 * You can add columns in many ways, even with nicknames for Column
$ColumnId = new VectorDev\AjaxTable\Column('id', '');

$En = new VectorDev\AjaxTable\Column('en-us', 'English');

$Br = new VectorDev\AjaxTable\Col('pt-br', 'Brazilian');

$Conf->addColumn(new VectorDev\AjaxTable\Column('es-es', 'Spanish'));
$Conf->addCol(new VectorDev\AjaxTable\Col('fr-fr', 'French'));
$Conf->addCol(new VectorDev\AjaxTable\Column('de-de', 'Germany'));
$Conf->addColumn(new VectorDev\AjaxTable\Col('ja-jp', 'Japanese'));
$Conf->addColumn(new VectorDev\AjaxTable\Column('ru-ru', 'Russian'));
$Conf->addCol(new VectorDev\AjaxTable\Column('ko-kp', 'Korean'));
$Conf->addCol(new VectorDev\AjaxTable\Col('he-il', 'Hebrew'));

 * You can set default sort for first request

 * You can instantiate your language class and change strings before add to config
$Lang = new VectorDev\AjaxTable\Lang\PtBr();

$Lang->first = '&lt;&lt;';
$Lang->previous = '&lt;';
$Lang->next = '&gt;';
$Lang->last = '&gt;&gt;';


 * You can change classes too, then I will use Classes to I build with my custom attr class
 * $Class = new VectorDev\AjaxTable\Format\Classes();
 * $Class->prefix = 'myawesomeprefix';
 * $Conf->setClasses($Class);

 * And AjaxTable can be responsive

 * If you have external js function, you can add to call before or after ajax requests

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="ajaxtable/css/ajaxtable.min.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="ajaxtable/css/ajaxtable-responsive.min.css" media="screen" type="text/css" />
    <script src="" crossorigin="anonymous"></script>
    <script type="text/javascript" src="ajaxtable/js/ajaxtable.js"></script>
             * And here you build your json config for AjaxTable js lib
            $('#my-awesome-table').ajaxTable(<?php echo $Conf->getJson(); ?>);

             * You can add external params for request
            $('#go').bind('click', function() {
                $('#my-awesome-table').setRequestParam('search', $('#search').val());

             * You can clear params
            $('#clear').bind('click', function() {

         * And you can call functions before and after requests
         * @returns {void}
        function report() {
            $('#my-response').append('<p> Ajax response on '+new Date().toString()+'</p>');
            $('.javascript-action').bind('click', function(){
                alert($(this).data('number')+' in spanish is '+$(this).data('spanish'));
        .wrapper {
            margin: 0 auto;
            padding: 10px;
            max-width: 1100px;

        .javascript-link {
            color: #0000ee;
            text-decoration: underline;

        .javascript-link span, .javascript-action {
            cursor: pointer;

        .javascript-action:hover {
            background-color: #778899 !important;
    <div class="wrapper">
        <input type="text" name="search" id="search" placeholder="Search in English or Brazilian"/>
        <button name="go" id="go">Search</button>
        <button name="clear" id="clear">Clear</button>
        Or click in Brazilian portuguese to see translation
        <br /><br />
        <table id="my-awesome-table"></table>
        <div id="my-response"></div>

For more information send a message to info at phpclasses dot org.