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: ...
随机推荐
- Sentinel-Go 源码系列（二）｜初始化流程和责任链设计模式
上节中我们知道了 Sentinel-Go 大概能做什么事情,最简单的例子如何跑起来 其实我早就写好了本系列的第二篇,但迟迟没有发布,感觉光初始化流程显得有些单一,于是又补充了责任链模式,二合一,内容显 ...
- 在代码生成工具Database2Sharp中增加Vue&Element 工作流页面的快速生成
在我们基于框架开发系统的时候,往往对一些应用场景的页面对进行了归纳总结,因此对大多数情况下的页面呈现逻辑都做了清晰的分析,因此在我们基于框架的基础上,增量式开发业务功能的时候,能够事半功倍.代码生成工 ...
- 手撸一个IOC容器
IoC 什么是IoC? IoC是Inversion of Control(控制反转)的简称,注意它是一个技术思想.描述的是对象创建.管理的事情. 传统开发方式:比如类A依赖类B,往往会在类A里面new ...
- ES6基础知识（Generator 函数）
1.next().throw().return() 的共同点 next().throw().return()这三个方法本质上是同一件事,可以放在一起理解.它们的作用都是让 Generator 函数恢复 ...
- 设计模式学习-使用go实现享元模式
享元模式 定义 优点 缺点 适用场景 代码实现 享元模式和单例模式的区别 参考 享元模式 定义 享元模式(Flyweight),运用共享技术有效的支持大量细粒度的对象. 享元模式的意图是复用对象,节省 ...
- SeleniumLibrary 主要关键字 基于python3
关键字的解释 https://blog.csdn.net/ak739105231/article/details/88926995 click element 都是元素点击事件:不赘述 click l ...
- [atARC066F]Contest with Drinks Hard
先不考虑修改,那么很明显即对于每一个极长的的区间,若其长度为$l$,有${l+1\choose 2}$的贡献 考虑dp去做,即$f_{i}$表示前$i$个数最大的答案,则$$f_{i}=\max(\m ...
- 解决Windows7、Windows10 ping不通的问题
在VLAN交换机网络下面不能访问Windows10或者Windows7共享.ping不通问题,关闭防火墙发现能ping通了共享也正常了. 但是关闭防火墙将给电脑系统留下安全隐患.不怕麻烦的可以继续往下 ...
- Java 操作符小记
"在最底层,Java中的数据是通过使用操作符来操作的" (Thinking in Java) 1 算术操作符 Java 中的基本算术操作符和其他大多数程序设计语言是相同的.其中包括 ...
- Hi3516开发笔记（五）：通过HiTools使用网口将uboot、kernel、roofts和userdata按照分区表烧写镜像
前言 前面生成了uboot,kernel,sample,userdata(我们实际修改了ip的),rootfs,现在需要烧写进入核心板. 使用网口烧写镜像(海思烧写必须占用调试串口) 步骤一: ...