首页 > 代码库 > jquery datatable真实示例
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="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/新增"/>‘); 99 $("div.toolbar").append(‘ <input id="getSelected" type="button" class="btn btn-primary btn-sm" onclick="getSelected();" value="http://www.mamicode.com/获取选中"/>‘);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 = http://www.mamicode.com/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=http://www.mamicode.com/request.getParameter(thisName);"--------------> " + thisValue);// } //JSONArray userData = http://www.mamicode.com/userService.pageGetUserData(startRecord,pageSize，columnsName[Integer.parseInt(sortColumn)], sortDir, searchValue);"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": "尾页" }} 
jquery datatable真实示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。