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": "尾页"
}
}
jquery datatable真实示例的更多相关文章
- jquery datatable使用简单示例
目标: 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. Query ...
- jquery datatable 多行(单行)选择(select)，行获取/行删除
jquery datatable 多行(单行)选择(select),行获取/行删除 代码展示 // 示例数据源 var dataSet = [ ['Tasman','Internet Explorer ...
- jquery dataTable汉化（插件形式）
1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...
- JQuery Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
- 分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
- jQuery DataTable 删除数据后重新加载
问题描述: 利用jQuery Datatable和artTemplate组合来做的表格.但是当删除数据时,需要重新加载table里的数据.但是问题是datatable并没有直接的重新渲染,反而给数据累 ...
- Jquery cookie操作示例，写入cookie，读取cookie，删除cookie
<html> <head> <meta name="viewport" content="width=device-width" ...
- JQuery Datatable用法
原文出处:http://sgyyz.blog.51cto.com/5069360/1408251 目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求 ...
- jquery Ajax请求示例，jquery Ajax基本请求方法示例
jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...
随机推荐
- prometheus（3）之grafan可视化展现
可视化UI界面Grafana的安装和配置 Grafana介绍 Grafana是一个跨平台的开源的度量分析和可视化工具,可以将采集的数据可视化的展示,并及时通知给告警接收方.它主要有以下六大特点: 1. ...
- 六问六答理解ForkJoin原理
摘要:ForkJoin线程池是将任务分割为子任务,有可能子任务还是很大,还需要进一步拆解,最终得到足够小的任务. 本文分享自华为云社区<ForkJoin线程池的学习和思考>,作者:brea ...
- JSON Parse error: Unexpected identifier "object";stringToAnyType报错 uni-app
只限于uni 的局限问题,博主的报错是因为初始化某些关键数据在uni的 onLoad生命周期 和 onReady生命周期里面初始化,导致数据加载时出现个别报错的BUG JSON Parse er ...
- vscode输出窗口中文乱码
解决方法:开始->设置->时间和语言->其他日期.时间和区域设置->区域.更改位置->管理.更改系统区域设置->勾选->重启 完美解决!来源:https:// ...
- 大一C语言学习笔记（4）---自省篇
博主"曾经"做过的傻事: #你有的*没打全 #你用/的时候没考虑()是一对的 #printf随后加\n #所有变量只要用,就一定要定义数据类型 #sqrt()代表根号 #inclu ...
- 在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
一般来说,录入数据的时候,我们都采用在一个窗体界面中,根据不同内容进行录入,但是有时候涉及主从表的数据录入,从表的数据有时候为了录入方便,也会通过表格控件直接录入.在Winform开发的时候,我们很多 ...
- 手把手教你学Dapr - 9. 可观测性
目录 手把手教你学Dapr - 1. .Net开发者的大时代 手把手教你学Dapr - 2. 必须知道的概念 手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序 手把手教你学Dapr ...
- Java设计模式之（五）——代理模式
1.什么是代理模式 Provide a surrogate or placeholder for another object to control access to it. Proxy Patte ...
- Atcoder Grand Contest 020 E - Encoding Subsets（记忆化搜索+复杂度分析）
Atcoder 题面传送门 & 洛谷题面传送门 首先先考虑如果没有什么子集的限制怎样计算方案数.明显就是一个区间 \(dp\),这个恰好一年前就做过类似的题目了.我们设 \(f_{l,r}\) ...
- Codeforces 840C - On the Bench（dp/容斥原理）
Codeforces 题目传送门 & 洛谷题目传送门 这是一道 *2500 的 D1C,可个人认为难度堪比某些 *2700 *2800. 不过嘛,*2500 终究还是 *2500,还是被我自己 ...