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²)
Tokyo Japan 14,094,034 2,194
São Paulo Brazil 11,451,245 1,521
Shanghai China 24,870,895 6,341
Seoul South Korea 9,586,195 605
Mumbai India 12,442,373 603
Moscow Russia 13,010,112 2,511
Mexico City Mexico 9,209,944 1,485
London United Kingdom 8,799,800 1,572