Return

Tables

Order and filter

Normal

Mostrar: Buscar:

Rank	Country	US $	Year
1	Luxembourg	113,533	2011
2	Qatar	98,329	2014
3	Norway	97,255	2011
4	Switzerland	81,161	2011
5	United Arab Emirates	67,008	2011
6	Australia	65,477	2011
7	Denmark	59,928	2011
8	Sweden	56,956	2011
9	Canada	50,436	2011
10	Netherlands	50,355	2011
11	Austria	49,809	2011
12	Finland	49,350	2011
13	Singapore	49,271	2011
14	United States	48,387	2011
15	Kuwait	47,982	2011
16	Ireland	47,513	2011
17	Belgium	46,878	2011
18	Japan	45,920	2011
19	France	44,008	2011
20	Germany	43,742	2011
21	Iceland	43,088	2011
22	United Kingdom	38,592	2011
23	New Zealand	36,648	2011
24	Brunei	36,584	2011
25	Italy	36,267	2011
-	European Union	35,116	2011
-	Hong Kong	34,049	2011
26	Spain	32,360	2011
27	Israel	31,986	2011
28	Cyprus	30,571	2011
29	Greece	27,073	2011
30	Slovenia	24,533	2011
31	Oman	23,315	2011
32	Bahamas, The	23,175	2011
33	Bahrain	23,132	2011
34	Korea, South	22,778	2011
35	Portugal	22,413	2011
36	Malta	21,028	2011
37	Saudi Arabia	20,504	2011
38	Czech Republic	20,444	2011
39	Taiwan	20,101	2011
40	Slovakia	17,644	2011
41	Trinidad and Tobago	17,158	2011
42	Estonia	16,583	2011
43	Barbados	16,148	2011
44	Equatorial Guinea^[7]	14,661	2011
45	Croatia	14,457	2011
46	Chile	14,278	2011
47	Hungary	14,050	2011
48	Uruguay	13,914	2011
49	Antigua and Barbuda	13,552	2011
50	Poland	13,540	2011
51	Lithuania	13,075	2011
52	Russia	12,993	2011
53	Brazil	12,789	2011
54	Saint Kitts and Nevis	12,728	2011
55	Latvia	12,671	2011
56	Seychelles	11,170	2011
57	Argentina	10,945	2011
58	Kazakhstan	10,694	2011
59	Gabon	10,654	2011
60	Venezuela	10,610	2011
61	Turkey	10,522	2011
62	Mexico	10,153	2011
-	World^[8]	10,144	2011
63	Lebanon	9,862	2011
64	Malaysia	9,700	2011
65	Botswana	9,481	2011
66	Costa Rica	8,877	2011
67	Romania	8,863	2011
68	Mauritius	8,777	2011
69	Panama	8,514	2011
70	South Africa	8,066	2011
71	Grenada	7,878	2011
72	Saint Lucia	7,435	2011
73	Montenegro	7,317	2011
74	Bulgaria	7,202	2011
75	Colombia	7,132	2011
76	Suriname	7,096	2011
77	Dominica	6,909	2011
78	Azerbaijan	6,832	2011
79	Iran	6,360	2011
80	Saint Vincent and the Grenadines	6,342	2011
81	Serbia	6,081	2011
82	Maldives	5,973	2011
83	Belarus	5,881	2011
84	Namibia	5,828	2011
85	Peru	5,782	2011
86	Libya	5,691	2011
87	Dominican Republic	5,639	2011
88	China	5,414	2011
89	Jamaica	5,402	2011
90	Thailand	5,394	2011
91	Algeria	5,304	2011
92	Angola	5,144	2011
93	Macedonia, Republic of	5,016	2011
94	Jordan	4,675	2011
95	Turkmenistan	4,658	2011
96	Bosnia and Herzegovina	4,618	2011
97	Ecuador	4,424	2011
98	Tunisia	4,351	2011
99	Belize	4,349	2011
100	Tonga	4,221	2011
101	Albania	3,992	2011
102	Fiji	3,965	2011
103	East Timor	3,949	2011
104	El Salvador	3,855	2011
105	Congo, Republic of the	3,714	2011
106	Cape Verde	3,661	2011
107	Ukraine	3,621	2011
108	Kosovo^[9]	3,534	2011
109	Iraq	3,513	2011
110	Indonesia	3,509	2011
111	Samoa	3,451	2011
112	Swaziland	3,358	2011
113	Tuvalu^[9]	3,319	2011
114	Paraguay	3,252	2011
115	Georgia	3,210	2011
116	Guyana	3,202	2011
117	Guatemala	3,182	2011
118	Morocco	3,083	2011
119	Mongolia	3,042	2011
120	Vanuatu	3,036	2011
121	Armenia	3,033	2011
122	Egypt	2,970	2011
123	Sri Lanka	2,877	2011
124	Syria	2,803	2010
125	Bolivia	2,315	2011
126	Philippines	2,223	2011
127	Bhutan	2,121	2011
128	Honduras	2,116	2011
129	Sudan	1,982	2011
130	Moldova	1,969	2011
131	Papua New Guinea	1,900	2011
132	Kiribati	1,593	2011
133	Uzbekistan	1,572	2011
134	Solomon Islands	1,554	2011
135	Ghana	1,529	2011
136	Nigeria	1,490	2011
137	São Tomé and Príncipe	1,473	2011
138	Djibouti	1,467	2011
139	Zambia	1,414	2011
140	India	1,389	2011
141	Vietnam	1,374	2011
142	Yemen	1,340	2011
143	Mauritania	1,290	2011
144	Lesotho	1,264	2011
145	Nicaragua	1,239	2011
146	Cameroon	1,230	2011
147	Laos	1,204	2011
148	Pakistan	1,201	2011
149	Senegal	1,076	2011
150	Kyrgyzstan	1,070	2011
151	Côte d'Ivoire	1,062	2011
152	Comoros	903	2011
153	Chad	892	2011
154	Cambodia	852	2011
155	Kenya	851	2011
156	Burma	832	2011
157	Tajikistan	831	2011
158	Zimbabwe	741	2011
159	Haiti	738	2011
160	Benin	737	2011
161	Bangladesh	678	2011
162	Mali	669	2011
163	Burkina Faso	664	2011
164	Nepal	653	2011
165	Rwanda	605	2011
166	Afghanistan	585	2011
167	Mozambique	583	2011
168	Guinea-Bissau	576	2011
169	Tanzania	553	2011
170	Gambia, The	543	2011
171	Togo	506	2011
172	Guinea	492	2011
173	Uganda	478	2011
174	Eritrea	475	2011
175	Madagascar	459	2011
176	Central African Republic	456	2011
177	Niger	399	2011
178	Sierra Leone	366	2011
179	Ethiopia	360	2011
180	Malawi	351	2011
181	Liberia	298	2011
182	Burundi	279	2011
183	Congo, Democratic Republic of the	216	2011

Mostrando a de Paginas:

Mostrar:
<select id="my-table-show"></select>
<span style="float:right; display:block;">
	Buscar: <input type="search" id="my-table-search">
</span>
<table id="my-table">
	<thead>
		<tr>
			<th>Rank</th>
			<th>Country</th>
			<th>US $</th>
			<th>Year</th>
		</tr>
	</thead>
	<tr>
		<td>1</td>
		<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Luxembourg.svg.png" width="22" height="13" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Luxembourg" title="Luxembourg">Luxembourg</a></td>
		<td>113,533</td>
		<td>2011</td>
	</tr>
	<tr>
		<td>2</td>
		<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Qatar.svg.png" width="22" height="9" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Qatar" title="Qatar">Qatar</a></td>
		<td>98,329</td>
		<td>2011</td>
	</tr>
</table>
Mostrando <span id="my-table-count-init"></span> a <span id="my-table-count-final"></span> de <span id="my-table-count-total"></span>
Paginas:
<ul id="my-table-navigation" data-navigation-prev="Anterior" data-navigation-next="Siguiente">
</ul>

Via AJAX with JSON

Mostrar: Buscar:

Band	Song

Paginas:

<table data-type="tableof" data-ajax-url="tablejson.php" id="Canciones">
  <thead>
    <th>Band</th>
    <th></th>
  </thead>
  <tbody>
  </tbody>
</table>

Via AJAX with JSON, PHP and DB

This options send the queries, the sorts, elements per page and number of page and offset

Mostrar: Buscar:

Banda	Canción

Paginas:

HTML

<select id="Canciones2-show"></select>
	<span style="float:right; display:block;">
		Buscar: <input type="search" id="Canciones2-search">
	</span>
	<table data-type="tableof" data-ajax-url="tablejsondb.php" data-ajax-db="true" id="Canciones2">
	  <thead>
	    <th data-dynatable-column="band">Banda</th>
	    <th data-dynatable-column="song">Canción</th>
	  </thead>
	  <tbody>
	  </tbody>
	</table>
	Paginas:
	<ul id="Canciones2-navigation" data-navigation-prev="Anterior" data-navigation-next="Siguiente">
	</ul>

PHP

<?php 
  header('Content-Type: application/json');
  if (!isset($_GET["page"])) {
    $_GET["page"] = "null";
  } 
  if (!isset($_GET["perPage"])) {
    $_GET["perPage"] = "null";
  }
  if (!isset($_GET["queries"]["search"])) {
    $_GET["queries"]["search"] = "null";
  }
  if (!isset($_GET["sorts"])) {
    $_GET["sorts"] = "null";
  } else {
    foreach ($_GET["sorts"] as $key => $value) {
      $_GET["sorts"] = $key."=".$value;
      break;
    }
  }
  if (!isset($_GET["offset"])) {
    $_GET["offset"] = "null";
  }
?>
{
  "records": [
    {
      "band": "<?php echo $_GET["page"]; ?>",
      "year": "",
      "song": "<?php echo $_GET["queries"]["search"]; ?>"
    },
    {
      "band": "<?php echo $_GET["sorts"]; ?>",
      "year": "", 
      "song": "<?php echo $_GET["offset"]; ?>"
    },
    {
      "band": "<?php echo $_GET["perPage"]; ?>",
      "year": 2015,
      "song": "El Scorcho"
    },
    {
      "band": "Chevelle",
      "year": 2015, 
      "song": "Family System"
    },
    {
      "band": "Weezer",
      "year": 2015,
      "song": "El Scorcho"
    },
    {
      "band": "Chevelle",
      "year": 2015, 
      "song": "Family System"
    },
    {
      "band": "Chevelle",
      "year": 2015, 
      "song": "Family System"
    },
    {
      "band": "Weezer",
      "year": 2015,
      "song": "El Scorcho"
    },
    {
      "band": "Chevelle",
      "year": 2015, 
      "song": "Family System"
    },
    {
      "band": "Chevelle",
      "year": 2015, 
      "song": "Family System"
    }
  ],
  "queryRecordCount": 300,
  "totalRecordCount": 10
}

Filter with another data not in the table (works with AJAX only)

With json and html direct the column needs to be placed.

Filtrar del 2014 <a data-filter="year" data-filter-value="2014" for="Canciones2">Filtrar del 2014</a>