PHP Classes

PHP AJAX Table: Load HTML tables dynamically using AJAX

Recommend this page to a friend!
  Info   View files Documentation   Demos   View files View files (25)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 79%Total: 987 This week: 1All time: 3,679 This week: 89Up
Version License PHP version Categories
ajax-table 1.0.1MIT/X Consortium ...5.4HTML, Localization, PHP 5, AJAX
Collaborate with this project 

Author

ajaxtable - github.com

Description

This package can load HTML tables dynamically using AJAX.

First it can generate JavaScript data to configure a jQuery plugin to build a table from configuration objects that define the tables rows and columns.

The jQuery plugin will perform AJAX requests to retrieve the table data and package classes generate the response with values to display on the table from data passed to the classes.

The package can also generate LIMIT clause for pagination and so only show the results for the current table page, as well ORDER BY clause to show the table data according to the column that the user picked to sort.

The presentation of the table can be configured with CSS styles.

The texts used in pagination links and other messages can be translated to multiple languages.

Innovation Award
PHP Programming Innovation award winner
June 2016
Winner


Prize: One big elePHPant Plush Mascott
Many applications need to display listings on Web pages. Those listings often appear as HTML tables split in multiple pages according.

The typical way to display these listing tables is to show links to go between pages. However, reloading the whole listing pages when the user clicks on the navigation links may be slow.

A better alternative is to use AJAX requests to retrieve only the part of the listings that changed. That is better but if you send the whole listing table HTML to the browser, it may be way more information than it is needed because the whole HTML markup will need to be sent too.

This package provides a better alternative that consists in sending initially the skeleton of the table. Then the class can send just the information of the table cells without the whole HTML markup.

This way it can increase the speed of the table listing update.

Manuel Lemos
Picture of Joubert RedRat
  Performance   Level  
Name: Joubert RedRat <contact>
Classes: 2 packages by
Country: Brazil Brazil
Age: ???
All time rank: 2123140 in Brazil Brazil
Week rank: 91 Up6 in Brazil Brazil Up
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Documentation

Usage

AjaxTable is separated in two steps, configuration for build table and response after ajax request.

Configuration

For configuration, is required to instanciate Conf to put all configuration, as below:

$Conf = new VectorDev\AjaxTable\Conf(base_url(['user', 'ajax-list']));

Conf will store all the information to generate a json for js lib

To create columns for your table, you will need to instanciate Column with information that you need to display.

$ColumnName = new VectorDev\AjaxTable\Column('username', 'Username');
$ColumnEmail = new VectorDev\AjaxTable\Column('email', 'E-mail');
$ColumnAge = new VectorDev\AjaxTable\Column('age', 'Age');

Column will store all the information about your table column.

After this, you need to add Column to your configuration.

$Conf->addColumn($ColumnName);
$Conf->addColumn($ColumnEmail);
$Conf->addColumn($ColumnAge);

To finish, you will build json configuration for AjaxTable js lib.

<script>
    jQuery().ready(function(){
        $('#table').ajaxTable(<?php echo $Conf->getJson(); ?>);
    });
</script>

And done, your table is now configurated to work as ajaxtable to request and print data.

Response

For response, is required to work with Response, Row and Cell classes to get request, work with data and response to view.

$Response = new VectorDev\AjaxTable\Response();
$Response->setRowsTotal($total_rows);

$limit = $Response->getLimitForSql(); // AjaxTable automatic build array for your use directly in your query
$order = $Response->getOrderByForSql(); // AjaxTable automatic build array with order by too

foreach($all_data as $data) {
	$CellUsername = new VectorDev\AjaxTable\Cell($data['user_username']);
	$CellEmail = new VectorDev\AjaxTable\Cell($data['user_mail']);
	$CellAge = new VectorDev\AjaxTable\Cell($data['user_age']);
	
	$Row = new VectorDev\AjaxTable\Row($CellUsername, $CellEmail, $CellAge);
	$Response->addRow($Row);
}

$Response->returnRequest();

Details

AjaxTable

AjaxTable is PHP and JavaScript library to build tables with ajax to get and display data. Different from another js plugins, AjaxTable build all table data and send to view, so javascript not be heavy on your page.

AjaxTable support pagination, responsive, i18n and more. You can change style, add html classes, change strings in your Language class and more.

Want to see more? We have a demo here.

Requeriments

  • PHP 5.4 or later
  • jQuery 1.6 or later

Install

1 - For install, you can use composer as below

composer require vectordev/ajaxtable

or download tarball and include autoload.php in your code as require.

2 - Copy all files on js and css folder to your assets folder and include in your page.

Usage

To see this library in action, see usage.md.


  Files folder image Files  
File Role Description
Files folder imagecss (4 files)
Files folder imageexamples (3 files)
Files folder imagejs (2 files)
Files folder imagesrc (7 files, 2 directories)
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file usage.md Doc. Example script

  Files folder image Files  /  css  
File Role Description
  Accessible without login Plain text file ajaxtable-responsive.css Data Auxiliary data
  Accessible without login Plain text file ajaxtable-responsive.min.css Data Auxiliary data
  Accessible without login Plain text file ajaxtable.css Data Auxiliary data
  Accessible without login Plain text file ajaxtable.min.css Data Auxiliary data

  Files folder image Files  /  examples  
File Role Description
  Accessible without login Plain text file index.php Example Example script
  Accessible without login Plain text file numbers.php Example Example script
  Accessible without login Plain text file numbers.sql Data Auxiliary data

  Files folder image Files  /  js  
File Role Description
  Accessible without login Plain text file ajaxtable.js Data Auxiliary data
  Accessible without login Plain text file ajaxtable.min.js Data Auxiliary data

  Files folder image Files  /  src  
File Role Description
Files folder imageFormat (3 files)
Files folder imageLang (2 files)
  Accessible without login Plain text file autoload.php Aux. Auxiliary script
  Plain text file Cell.php Class Class source
  Plain text file Col.php Class Class source
  Plain text file Column.php Class Class source
  Plain text file Conf.php Class Class source
  Plain text file Response.php Class Class source
  Plain text file Row.php Class Class source

  Files folder image Files  /  src  /  Format  
File Role Description
  Plain text file Classes.php Class Class source
  Plain text file Format.php Class Class source
  Plain text file Table.php Class Class source

  Files folder image Files  /  src  /  Lang  
File Role Description
  Plain text file Lang.php Class Class source
  Plain text file PtBr.php Class Class source

 Version Control Unique User Downloads Download Rankings  
 0%
Total:987
This week:1
All time:3,679
This week:89Up
User Ratings User Comments (4)
 All time
Utility:100%StarStarStarStarStarStar
Consistency:100%StarStarStarStarStarStar
Documentation:91%StarStarStarStarStar
Examples:100%StarStarStarStarStarStar
Tests:-
Videos:-
Overall:79%StarStarStarStar
Rank:30
 
Thats a very good classe ;-)
7 years ago (José Filipe Lopes Santos)
80%StarStarStarStarStar
Thats a very good classe ;-)
7 years ago (José Filipe Lopes Santos)
80%StarStarStarStarStar
Thats a very good classe ;-)
7 years ago (José Filipe Lopes Santos)
80%StarStarStarStarStar
Thats a very good classe ;-)
7 years ago (José Filipe Lopes Santos)
80%StarStarStarStarStar