Jquery DataTable関連例
145501 ワード
一、Jquery-DataTable
DataTableはjqueryのオープンソースのプラグインです.高度に柔軟な特性を持ち、漸進的な強化に基づいて、任意のテーブルにインタラクティブを追加できます.次のような機能があります.は、ページング、検索、および複数の列のソートを提供する. はすべてのタイプのデータソースをサポートします: DOM,javascript,Ajaxとサーバ側の処理; 簡潔なテーマ、DataTable、JQuery UI、Bootstrap、Foundation; は、エディタ、テーブルツール、固定カラムなど、さまざまな拡張機能をサポートします. 豊富な構成オプション、表現力に富んだapi;
DataTabelsのダウンロードアドレスは、http://www.datatables.net/download/indexです.ここで使用したバージョンは1.10.6です.
二、サンプルコード
1、データソースがjavascript配列
Webコードは次のとおりです.
2、動的にサーバーデータを読み取る
Webコードは次のとおりです.
サーバ側のコードは次のとおりです.
サーバ側から返されるjsonデータフォーマットは次のとおりです.
DataTableはjqueryのオープンソースのプラグインです.高度に柔軟な特性を持ち、漸進的な強化に基づいて、任意のテーブルにインタラクティブを追加できます.次のような機能があります.
DataTabelsのダウンロードアドレスは、http://www.datatables.net/download/indexです.ここで使用したバージョンは1.10.6です.
二、サンプルコード
1、データソースがjavascript配列
Webコードは次のとおりです.
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta charset="utf-8"/>
6 <title>jquery-datatable 1.10.6</title>
7
8 <style type="text/css">
9 /** */
10 table{table-layout: fixed;border-collapse: collapse;}
11 td{overflow: hidden;text-overflow:ellipsis;} /**/
12 </style>
13 </head>
14 <body>
15 <div>
16 <table border="1" id="example_2" style="width: 100%;" >
17 </table>
18 </div>
19 <script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script>
20 <script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>
21 <script type="text/javascript">
22 var dataSet = [
23 ['Trident','InternetInternet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Explorer 4.0','Win 95+','4','X'],
24 ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
25 ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
26 ['Trident','Internet Explorer 6','Win 98+','6','A'],
27 ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
28 ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
29 ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
30 ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
31 ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
32 ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
33 ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
34 ['Gecko','Camino 1.5','OSX.3+','1.8','A'],
35 ['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
36 ['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
37 ['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
38 ['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
39 ['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
40 ['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
41 ['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
42 ['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
43 ['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
44 ['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
45 ['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
46 ['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
47 ['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
48 ['Gecko','Epiphany 2.20','Gnome','1.8','A'],
49 ['Webkit','Safari 1.2','OSX.3','125.5','A'],
50 ['Webkit','Safari 1.3','OSX.3','312.8','A'],
51 ['Webkit','Safari 2.0','OSX.4+','419.3','A'],
52 ['Webkit','Safari 3.0','OSX.4+','522.1','A'],
53 ['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
54 ['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
55 ['Webkit','S60','S60','413','A'],
56 ['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
57 ['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
58 ['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
59 ['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
60 ['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
61 ['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
62 ['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
63 ['Presto','Opera for Wii','Wii','-','A'],
64 ['Presto','Nokia N800','N800','-','A'],
65 ['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
66 ['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
67 ['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
68 ['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
69 ['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
70 ['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
71 ['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
72 ['Misc','NetFront 3.1','Embedded devices','-','C'],
73 ['Misc','NetFront 3.4','Embedded devices','-','A'],
74 ['Misc','Dillo 0.8','Embedded devices','-','X'],
75 ['Misc','Links','Text only','-','X'],
76 ['Misc','Lynx','Text only','-','X'],
77 ['Misc','IE Mobile','Windows Mobile 6','-','C'],
78 ['Misc','PSP browser','PSP','-','C'],
79 ['Other browsers','All others','-','-','U']
80 ];
81 $(document).ready(function(){
82 $('#example_2').dataTable( {
83 "data": dataSet,
84 "aoColumns": [
85 { "title": " " , "sWidth" : "30%" },
86 { "title": " " , "sWidth" : "10%"},
87 { "title": " " , "sWidth" : "20%" },
88 { "title": " ", "class": "center" , "sWidth" : "20%"},
89 { "title": " ", "class": "center" , "sWidth" : "20%"}
90 ],
91 "bPaginate": true, // ，
92 "bServerSide": false,//
93 "bSort": false, // ，
94 "bSortClasses": false,
95 "bFilter": false, // ，
96 "bAutoWidth": false, //
97 "aoColumnDefs" : [ {
98 sDefaultContent : '',
99 aTargets : [ '_all' ]
100 } ],
101 "oLanguage": {
102 "sProcessing": " ......",
103 "sLengthMenu": " _MENU_ ",
104 "sZeroRecords": " ， ！",
105 "sEmptyTable": " ！",
106 "sInfo": " _START_ _END_ ， _TOTAL_ ",
107 "sInfoFiltered": " _MAX_ ",
108 "sInfoEmpty" : " 0 0 ",
109 "sSearch": " ",
110 "oPaginate": {
111 "sFirst": " ",
112 "sPrevious": " ",
113 "sNext": " ",
114 "sLast": " "
115 }
116 } //
117 });
118
119 });
120 </script>
121 </body>
122 </html>2、動的にサーバーデータを読み取る
Webコードは次のとおりです.
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta charset="utf-8"/>
6 <title>jquery-datatable 1.10.6</title>
7
8 <style type="text/css">
9 /** */
10 table{table-layout: fixed;border-collapse: collapse;}
11 td{overflow: hidden;text-overflow:ellipsis;} /**/
12 </style>
13 </head>
14 <body>
15 <div>
16 <table id="sample_1">
17 <thead>
18 <tr>
19 <th> </th>
20 <th> </th>
21 <th> </th>
22 <th> </th>
23 <th> </th>
24 <th> </th>
25 <th> </th>
26 <th> </th>
27 <th> </th>
28 </tr>
29 </thead>
30 <tbody>
31 </tbody>
32 </table>
33 </div>
34 <script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script>
35 <script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>
36 $(document).ready(function(){
37
38 var oTable = $('#sample_1').dataTable( {
39 "sAjaxSource": "${ctx}/student/data.action",
40 "sServerMethod": "POST" , // post
41 "fnServerParams": function ( aoData ) {// ，
42 aoData.push( { "name": "nage", "value": $("#name").val()} );//
43 aoData.push( { "name": "classId", "value": $("#classId").val()} );// id
44 aoData.push( { "name": "birthday", "value": $("#birthday").val()} ); //
45 aoData.push( { "name": "city", "value": $("#city").val()} ); //
46 },
47 "aoColumns": [
48 { "sName": "index",
49 "sWidth": "4%", //
50 "sClass": "center",
51 "bSearchable": false,
52 "bStorable": false,
53 "fnRender": function (a) {
54 return a.iDataRow + 1;
55 }
56 },
57 { "mData": "no",
58 "sWidth": "10%"
59 },
60 { "mData": "name" ,
61 "sWidth": "10%"
62 },
63 { "mData": "graduationDate" ,
64 "sWidth": "10%"
65 },
66 { "mData": "gender" ,
67 "sWidth": "10%"
68 },
69 { "mData": "city" ,
70 "sWidth": "10%"
71 },
72 { "sName": "className",
73 "sWidth": "10%",
74 "sClass": "center",
75 "bSearchable": false,
76 "bStorable": false,
77 "fnRender": function (a) {
78 var result="";
79 jQuery.ajax({// classId
80 url: "${ctx}/class/"+a.aData.classId,
81 type: "get",
82 async: false, // false
83 dataType: "json",
84 success: function(data){
85 result = data.class.id;
86 }
87 });
88 return result;
89 }
90 },
91 { "mData": "birthday",
92 "sWidth": "10%"
93 },
94 { "sName": "action",
95 "sWidth": "10%",
96 "sClass": "center",
97 "bSearchable": false,
98 "bStorable": false,
99 "fnRender": function (a) {
100 var s = "<a href=\"${ctx}/control/monitor/rule/step1.action?rid=" + a.aData.id + "\"> </a> ";
101 var e = "<a href=\"${ctx}/control/monitor/rule/detail.action?rid=" + a.aData.id + "\"> </a> ";
102 return s + e;
103 }
104 }
105 ],
106 "bPaginate": true, // ，
107 "bServerSide": true,//
108 "bSort": false, // ，
109 "bSortClasses": false,
110 "bFilter": false, // ，
111 "sSearch" : false, //
112 "sAjaxDataProp": "rows", // json key
113 "bAutoWidth": false, //
114 "aoColumnDefs" : [ {
115 sDefaultContent : '',
116 aTargets : [ '_all' ]
117 } ],
118 "oLanguage": {
119 "sProcessing": " ......",
120 "sLengthMenu": " _MENU_ ",
121 "sZeroRecords": " ， ！",
122 "sEmptyTable": " ！",
123 "sInfo": " _START_ _END_ ， _TOTAL_ ",
124 "sInfoFiltered": " _MAX_ ",
125 "sInfoEmpty" : " 0 0 ",
126 "sSearch": " ",
127 "oPaginate": {
128 "sFirst": " ",
129 "sPrevious": " ",
130 "sNext": " ",
131 "sLast": " "
132 }
133 } //
134 });
135 });
136 </script>
137 </body>
138 </html> サーバ側のコードは次のとおりです.
1 /**
2 * ，jquery-data-table（ springmvc ）
3 * @param iDisplayStart
4 * @param iDisplayLength
5 * @param request
6 * @return
7 * @throws Exception
8 */
9 @RequestMapping("/data")
10 @ResponseBody
11 public Map<String, Object> jsonList(@RequestParam("iDisplayStart") int iDisplayStart,
12 @RequestParam("iDisplayLength") int iDisplayLength, HttpServletRequest request) throws Exception {
13 Map<String, Object> params = new HashMap<String, Object>();
14 params.setParameter("_currpage", iDisplayStart + 1);//
15 params.setParameter("_pagesize", iDisplayLength);//
16
17 //
18 params.setParameter("name", request.getParameter("name"));
19 params.setParameter("classId", request.getParameter("classId"));
20 params.setParameter("birthday", request.getParameter("birthday"));
21 params.setParameter("city", request.getParameter("city"));
22
23 List datas = null;
24 int total = 0;
25 try {
26 total = this.getService().count(params);//
27 datas = this.getService().query(params);//
28 } catch (Exception e) {
29 LOGGER.error("jsonListAction ", e);
30 Map<String, Object> rtn = new HashMap<String, Object>();
31 rtn.put("code", "0");
32 rtn.put("error", " ：" + e.getMessage());
33 return rtn;
34 }
35 Map<String, Object> result = new HashMap<String, Object>();
36 result.put("iTotalDisplayRecords", total);
37 result.put("iTotalRecords", total);
38 result.put("rows", datas);
39 return result;
40 }サーバ側から返されるjsonデータフォーマットは次のとおりです.
{"iTotalDisplayRecords":30, "iTotalRecords":30, "rows":[
{"id": "0001", "name" : " ", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " ", "no" : "090002", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " ", "no" : "090003", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " ", "no" : "090004", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " 2", "no" : "090005", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " 3", "no" : "090006", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " 4", "no" : "090007", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " 5", "no" : "090008", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " 6", "no" : "090009", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" },
{"id": "0001", "name" : " 7", "no" : "0900010", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001"},
{"id": "0001", "name" : " 8", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : " ", "city" : " " , "birthday" : "1992-07-28" , "classId" : "10001" }]}