PAD Showcase
All tags/Data table

Paged and sortable

The largest cities, eight rows a page with page links below - sorting and paging are plain links, so they work without JavaScript.

1 The data datatable/paged.php php
<?php

  // The cities proper by population, the largest first, with their area.

  $cities = [
    [ 'city' => 'Shanghai',    'country' => 'China',          'population' => 24870895, 'area' => 6341  ],
    [ 'city' => 'Beijing',     'country' => 'China',          'population' => 21893095, 'area' => 16411 ],
    [ 'city' => 'Kinshasa',    'country' => 'DR Congo',       'population' => 16315534, 'area' => 9965  ],
    [ 'city' => 'Istanbul',    'country' => 'Türkiye',        'population' => 15655924, 'area' => 5461  ],
    [ 'city' => 'Tokyo',       'country' => 'Japan',          'population' => 14094034, 'area' => 2194  ],
    [ 'city' => 'Moscow',      'country' => 'Russia',         'population' => 13010112, 'area' => 2511  ],
    [ 'city' => 'Mumbai',      'country' => 'India',          'population' => 12442373, 'area' => 603   ],
    [ 'city' => 'São Paulo',   'country' => 'Brazil',         'population' => 11451245, 'area' => 1521  ],
    [ 'city' => 'Delhi',       'country' => 'India',          'population' => 11034555, 'area' => 1484  ],
    [ 'city' => 'Jakarta',     'country' => 'Indonesia',      'population' => 10562088, 'area' => 662   ],
    [ 'city' => 'Dhaka',       'country' => 'Bangladesh',     'population' => 10278882, 'area' => 306   ],
    [ 'city' => 'Cairo',       'country' => 'Egypt',          'population' => 10044894, 'area' => 3085  ],
    [ 'city' => 'Lima',        'country' => 'Peru',           'population' => 9943800,  'area' => 2672  ],
    [ 'city' => 'Seoul',       'country' => 'South Korea',    'population' => 9586195,  'area' => 605   ],
    [ 'city' => 'Mexico City', 'country' => 'Mexico',         'population' => 9209944,  'area' => 1485  ],
    [ 'city' => 'London',      'country' => 'United Kingdom', 'population' => 8799800,  'area' => 1572  ],
    [ 'city' => 'Lagos',       'country' => 'Nigeria',        'population' => 8048430,  'area' => 1171  ],
    [ 'city' => 'Bangkok',     'country' => 'Thailand',       'population' => 5494932,  'area' => 1569  ],
  ];

?>
2 The tag datatable/paged.pad pad
{datatable data='cities', labels='City, Country, Population, Area (km²)', rows=8, sortable, caption='Largest cities by population'}
3 The result rendered on the server
Largest cities by population
City Country Population Area (km²)
Delhi India 11,034,555 1,484
Jakarta Indonesia 10,562,088 662
Dhaka Bangladesh 10,278,882 306
Cairo Egypt 10,044,894 3,085
Lima Peru 9,943,800 2,672
Seoul South Korea 9,586,195 605
Mexico City Mexico 9,209,944 1,485
London United Kingdom 8,799,800 1,572