jquery datatable真实示例
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>datatable服务端示例页面</title> 7 <link rel="stylesheet" type="text/css" media="screen" href="lib/datatable/media/css/jquery.dataTables.css"> 8 <%@ include file="common/commonHeader.jsp"%> 9 <script type="text/javascript" src="lib/datatable/media/js/jquery.js"></script> 10 <script type="text/javascript" src="lib/datatable/media/js/jquery.dataTables.js"></script> 11 <style type="text/css"> 12 .toolbar { 13 float: left; 14 } 15 .dtselected{ 16 background-image:url('lib/datatable/media/images/dtSelected.png'); 17 background-repeat:repeat-x; 18 } 19 20 <input type="checkbox" class="checkbox" 21 </style> 22 <script type="text/javascript"> 23 24 /*JS生成table*/ 25 var dataSet = [['张三','男','研发二部','13768451236','<a>删除</a>'],['李四','男','研发二部','15826457981','<a>删除</a>']]; 26 $(document).ready(function() { 27 $('#jsGenerate').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="jsTable"></table>' ); 28 $('#jsTable').dataTable( { 29 "data": dataSet,//数据集 30 "columns": [ 31 { "title": "姓名" }, 32 { "title": "性别" }, 33 { "title": "部门" }, 34 { "title": "联系方式", "class": "center" }, 35 { "title": "操作", "class": "center" } 36 ], 37 "searching": false,//是否展示搜索器 38 "info": true,//分页提示信息展示 39 "pagingType": "full_numbers"//分页样式 40 } ); 41 } ); 42 43 44 /*服务端请求数据生成table*/ 45 geneServerTable(); 46 function geneServerTable(){ 47 var selected = []; 48 var t = $('#serverDataTable').dataTable( { 49 "stateSave": true,//保存状态到cookie ******很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。 50 "paging": true,//是否启用分页 51 "ordering": true,//是否启用排序 52 "searching": true,//是否展示搜索器 53 "info": true,//是否展示分页提示信息 54 "order": [[ 3, "desc" ]],//默认排序规则 55 "pagingType": "full_numbers",//分页样式 56 "autoWidth": false,//列的宽度会根据table的宽度自适应 57 "processing": true,//是否显示正在处理的提示 58 "serverSide": true,//是否启用服务器端异步请求 59 "ajax": "getTableData.do",//请求 60 "dom": '<"toolbar">frtilp',//工具条和布局 61 "language": {//汉化 62 "url":"lib/datatable/i18n.txt" 63 }, 64 "columns": [//展示列 65 { "data":null}, 66 { "data": "name","width":"20%"}, 67 { "data": "gender"}, 68 { "data":null} 69 ], 70 "columnDefs": [ //列属性定义 71 { 72 "render": function ( data, type, row ) { 73 return '<a href="javascript:void(0);" onclick="deleteRow(' + row.id + ');">删除</a> <a href="javascript:void(0);" onclick="modifyRow(' + row.id + ');">修改</a>'; 74 }, 75 "targets": 3 76 }, 77 { 78 "visible": true,//列是否可见 79 "searchable": false, 80 "targets": 1 81 }, 82 { 83 "render": function ( data, type, row ) { 84 return ' <input type="checkbox" value="' + data.id + '" title="' + data.id + '" name="ck"/>'; 85 }, 86 "targets": 0 87 } 88 ], 89 "initComplete": function(settings, json) {//回调函数，原因：异步请求 90 addEvent();//事件 91 } 92 } ); 93 } 94 95 /*事件*/ 96 function addEvent(){ 97 /*工具条*/ 98 $("div.toolbar").append('<input id="addRow" type="button" class="btn btn-primary btn-sm" onclick="alert(111);" value="新增"/>'); 99 $("div.toolbar").append(' <input id="getSelected" type="button" class="btn btn-primary btn-sm" onclick="getSelected();" value="获取选中"/>'); 100 101 /*双击事件*/ 102 $('#serverDataTable tbody').on('dblclick', 'tr', function () { 103 var name = $('td', this).eq(1).text(); 104 alert( '点击了 \'' + name + '\' 行' ); 105 }); 106 107 /*单击事件*/ 108 $('#serverDataTable tbody').on('click', 'tr', function () { 109 //$(this).children().toggleClass("dtselected"); 110 var checkObj = $(this).children().first().children(); 111 if (checkObj.attr("checked") == true || checkObj.attr("checked") == "checked") { 112 checkObj.attr("checked", false); 113 checkObj.removeAttr("checked"); 114 } else { 115 checkObj.attr("checked", true); 116 } 117 }); 118 } 119 120 /*获取选中*/ 121 function getSelected(){ 122 var spCodesTemp = ""; 123 $('#serverDataTable tbody input:checkbox[name=ck]:checked').each(function(i){ 124 if(0==i){ 125 spCodesTemp = $(this).val(); 126 }else{ 127 spCodesTemp += (","+$(this).val()); 128 } 129 }); 130 alert("选中行的ID是：" + spCodesTemp); 131 } 132 133 /*删除事件*/ 134 function deleteRow(id){ 135 alert("本行数据的ID是：" + id); 136 } 137 138 /*修改事件*/ 139 function modifyRow(id){ 140 alert("本行数据的ID是：" + id); 141 } 142 </script> 143 </head> 144 <body> 145 <!-- <b>示例一：根据js对象生成table</b> 146 <div id="jsGenerate" style="margin-top:20px"></div>--> 147 <br> 148 <br> 149 <!-- <b>示例二：从服务端请求数据生成table</b>--> 150 <!-- table table-striped table-bordered table-hover dataTable --> 151 <table id="serverDataTable" class="table-striped table-bordered table-hover" style="margin-top:20px;" cellspacing="0" width="100%"> 152 <thead> 153 <tr> 154 <th width="16px;"></th> 155 <th>姓名</th> 156 <th>性别</th> 157 <th>操作</th> 158 </tr> 159 </thead> 160 </table> 161 162 </body> 163 </html>
@RequestMapping("getTableData")
public ModelAndView getTableData(HttpServletRequest request, HttpServletResponse response) throws Exception {
//1.分页参数
int pageSize = 10;//页面显示数量
int startRecord = 0;//开始记录位置
String size = request.getParameter("length");
if (!"".equals(size) && size != null) {
pageSize = Integer.parseInt(size);
}
String currentRecord = request.getParameter("start");
if (!"".equals(currentRecord) && currentRecord != null) {
startRecord = Integer.parseInt(currentRecord);
}
//2.排序参数
String sortColumn = request.getParameter("order[0][column]");//因为是二维的表格，因此只有一维需要排序，所以 order 的下标未 0. 该属性表示第几列需要排序。
String sortDir = request.getParameter("order[0][dir]");//排序方式 ASC | DESC
//3.搜索参数
String searchValue = request.getParameter("search[value]");//search 输入框中的值
System.out.println("----->sortColumn:" + sortColumn + "------>sortDir:" + sortDir + "---->searchValue:" + searchValue);
//所有参数
// Enumeration<String> paraNames = request.getParameterNames();
// for(Enumeration e=paraNames;e.hasMoreElements();){
// String thisName=e.nextElement().toString();
// String thisValue=request.getParameter(thisName);
// System.out.println(thisName + "--------------> " + thisValue);
// }
//JSONArray userData = userService.pageGetUserData(startRecord,pageSize，columnsName[Integer.parseInt(sortColumn)], sortDir, searchValue);
//4.获取后台数据
JSONArray arr = new JSONArray();
int count = 15;
//假分页数据
for (int i = 0; i < 15; i++) {
if (startRecord < 10 && i < 10){//第一页
JSONObject obj = new JSONObject();
obj.put("id", i);
obj.put("name", "张三" + i);
obj.put("gender", "男");
arr.add(obj);
}
if(startRecord >= 10 && i >= 10){//第二页
JSONObject obj = new JSONObject();
obj.put("id", i);
obj.put("name", "张三" + i);
obj.put("gender", "男");
arr.add(obj);
}
}
//5.封装要返回的数据
DataVO<Object> result = new DataVO<Object>();
result.setDraw(Integer.parseInt(request.getParameter("draw") == null ? "0" : request.getParameter("draw")) + 1);//表示请求次数
result.setData(arr);//具体的数据对象数组
result.setRecordsTotal(count);//总记录数
result.setRecordsFiltered(count);//过滤后的总记录数
PrintWriter out = response.getWriter();
out.print(JSON.toJSONString(result));
return null;
}
i18n.txt
{
"search": "搜索:",
"processing": "正在加载数据...",
"lengthMenu": "每页显示 _MENU_ 条记录",
"zeroRecords": "对不起，查询不到相关数据！",
"info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"infoEmpty": "表中无数据存在！",
"infoFiltered": "数据表中共为 _MAX_ 条记录",
"paginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
}
}
