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²)
Bangkok Thailand 5,494,932 1,569
Lagos Nigeria 8,048,430 1,171
London United Kingdom 8,799,800 1,572
Mexico City Mexico 9,209,944 1,485
Seoul South Korea 9,586,195 605
Lima Peru 9,943,800 2,672
Cairo Egypt 10,044,894 3,085
Dhaka Bangladesh 10,278,882 306