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²)
São Paulo Brazil 11,451,245 1,521
Tokyo Japan 14,094,034 2,194