テーブル表示ツールjQueryプラグインFlexigrid

IDEA*IDEAの2008年3月24日のエントリー jQueryでテーブルをかなり便利にフォーマットしてくれる『Flexigrid』 で

jQueryを使って実に簡単にテーブルをいろいろ便利にしてくれるライブラリ

と紹介されていたのが Paulo P.Marinas 氏に依る Flexigrid にて2008年6月現在BETA版として公開されておられますのを、 当ブログにも使用してみたところ、 業務にも実に有用に使用可能に成り得るユーティリティ javascript ではないかと感じました。

本ツールはjQueryのプラグインとして作成されており、 様々なオプションが使用可能ですので、 必要性を鑑みて実装することが出来、 当アーティクルでは

1. テーブル表示・非表示切替機能
2. 列表示選択機能
3. 列幅可変機能

を利用していますが、列をソートする機能は上手く動作させられませんでした。
列幅可変機能につきましては、 列幅どころかテーブルの幅自体可変ですのでエッジを摘まんでドラッグして広げてみて下さい。

AjaxらしくJSON形式データを用いて動的データとの通信も可能ですので、 利用価値は実に高いと思われ、当該機能の実際のサンプルは上記 Flexigrid 頁内のExample 3 にてご覧いただけ、 また当アーティクルにおけるサンプルは、 アーティクルに直接アクセスされている方以外は、 タイトル若しくは[続きを読む]をクリックしてご覧いただきたいと思います。

データは総務省・統計局の
人口推計 > 月報 > 平成17年国勢調査結果確定人口に基づく改定数値(平成17年10月～18年7月)
全国推計人口－男女，年齢階級別 に公開されているものを利用させていただきました。

総数	126,253	61,632	64,621	126,189	61,601	64,588	126,155	61,577	64,578	126,166	61,575	64,591	126,134	61,561	64,573	126,136	61,557	64,579	126,162	61,563	64,599
0～4歳	5,515	2,824	2,690	5,504	2,819	2,685	5,498	2,816	2,682	5,496	2,815	2,681	5,489	2,812	2,677	5,483	2,808	2,674	5,478	2,806	2,672
5～9歳	5,912	3,031	2,881	5,908	3,029	2,880	5,903	3,026	2,877	5,904	3,027	2,878	5,896	3,023	2,873	5,891	3,020	2,871	5,889	3,019	2,870
10～14歳	5,978	3,064	2,914	5,974	3,062	2,911	5,974	3,062	2,912	5,971	3,061	2,910	5,968	3,059	2,909	5,968	3,059	2,909	5,969	3,059	2,910
15～19歳	6,483	3,332	3,151	6,463	3,322	3,142	6,447	3,313	3,134	6,432	3,305	3,127	6,419	3,298	3,121	6,407	3,291	3,116	6,398	3,286	3,112
20～24歳	7,200	3,692	3,508	7,185	3,686	3,499	7,174	3,682	3,493	7,173	3,681	3,492	7,160	3,675	3,486	7,156	3,673	3,483	7,154	3,672	3,482
25～29歳	8,035	4,086	3,948	7,998	4,069	3,929	7,970	4,055	3,915	7,942	4,040	3,901	7,912	4,026	3,886	7,886	4,013	3,873	7,864	4,002	3,862
30～34歳	9,580	4,860	4,721	9,560	4,850	4,709	9,544	4,842	4,701	9,531	4,835	4,696	9,515	4,828	4,687	9,503	4,822	4,681	9,491	4,816	4,675
35～39歳	8,616	4,361	4,255	8,659	4,382	4,277	8,700	4,402	4,298	8,753	4,429	4,325	8,804	4,455	4,349	8,862	4,484	4,378	8,918	4,512	4,406
40～44歳	8,042	4,056	3,986	8,004	4,039	3,966	7,976	4,024	3,953	7,947	4,008	3,939	7,914	3,993	3,922	7,891	3,980	3,911	7,879	3,974	3,905
45～49歳	7,633	3,830	3,803	7,617	3,822	3,795	7,605	3,816	3,789	7,596	3,811	3,785	7,597	3,811	3,786	7,594	3,810	3,784	7,589	3,806	3,783
50～54歳	8,624	4,301	4,323	8,557	4,270	4,287	8,511	4,246	4,265	8,476	4,228	4,248	8,451	4,216	4,235	8,428	4,205	4,224	8,409	4,194	4,215
55～59歳	10,408	5,158	5,250	10,513	5,207	5,305	10,576	5,238	5,338	10,642	5,270	5,372	10,696	5,297	5,398	10,733	5,315	5,418	10,753	5,324	5,428
60～64歳	8,408	4,088	4,320	8,307	4,040	4,267	8,250	4,012	4,238	8,185	3,981	4,205	8,145	3,960	4,184	8,117	3,947	4,171	8,102	3,939	4,163
65～69歳	7,429	3,546	3,883	7,436	3,550	3,886	7,448	3,557	3,891	7,456	3,562	3,894	7,469	3,568	3,901	7,482	3,574	3,908	7,503	3,584	3,919
70～74歳	6,689	3,068	3,621	6,714	3,080	3,634	6,732	3,090	3,643	6,733	3,092	3,641	6,745	3,098	3,647	6,754	3,102	3,652	6,760	3,105	3,655
75～79歳	5,286	2,272	3,015	5,316	2,285	3,031	5,328	2,292	3,037	5,343	2,300	3,043	5,351	2,303	3,047	5,351	2,304	3,047	5,357	2,307	3,050
80～84歳	3,466	1,249	2,217	3,494	1,265	2,229	3,516	1,277	2,239	3,547	1,294	2,253	3,564	1,302	2,262	3,585	1,312	2,272	3,599	1,320	2,280
85歳以上	2,951	815	2,135	2,980	823	2,157	3,002	828	2,174	3,038	837	2,200	3,040	837	2,204	3,045	837	2,208	3,050	838	2,212
0～14歳	17,404	8,919	8,485	17,386	8,910	8,475	17,375	8,905	8,470	17,371	8,903	8,469	17,353	8,893	8,460	17,341	8,887	8,455	17,337	8,884	8,452
15～64歳	83,028	41,763	41,264	82,864	41,688	41,176	82,754	41,630	41,124	82,678	41,587	41,090	82,612	41,560	41,052	82,578	41,540	41,037	82,556	41,525	41,032
65歳以上	25,821	10,950	14,871	25,940	11,003	14,937	26,026	11,043	14,983	26,116	11,085	15,032	26,169	11,108	15,061	26,217	11,130	15,087	26,269	11,154	15,115
75歳以上	11,704	4,336	7,368	11,789	4,372	7,417	11,846	4,396	7,450	11,928	4,431	7,497	11,955	4,443	7,513	11,981	4,453	7,527	12,006	4,464	7,542