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²)
Dhaka Bangladesh 10,278,882 306
Mumbai India 12,442,373 603
Seoul South Korea 9,586,195 605
Jakarta Indonesia 10,562,088 662
Lagos Nigeria 8,048,430 1,171
Delhi India 11,034,555 1,484
Mexico City Mexico 9,209,944 1,485
São Paulo Brazil 11,451,245 1,521