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: ...
随机推荐
- jmeter 数据库压力测试之MySql
1.首先下载合适的数据库驱动:https://mvnrepository.com/artifact/mysql/mysql-connector-java 2.创建testplan,并添加jar包 3. ...
- git 回滚版本
方法一.(回滚到原来的版本) 1.在gitlab上找到要恢复的版本号,如: bbdca96 2.在客户端执行如下命令(执行前,先将本地代码切换到对应分支): git reset --hard bbdc ...
- python及pygame雷霆战机游戏项目实战01 控制飞机
入门 在这个系列中,将制作一个雷霆战机游戏. 首先,将游戏设置修改一下: WIDTH = 480 HEIGHT = 600 FPS = 60 玩家精灵 要添加的第一件事是代表玩家的精灵.最终,这将是一 ...
- Java String 转成 二位数组
... package str; import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; impo ...
- 微信小程序（八）
应用弹性盒子布局 基于 flexbox layout 的实现 先变为 flexbox layout display: flex; 从上往下 flex-direction: column; 均匀分布,居 ...
- Hi3516开发笔记（二）：Hi3516虚拟机基础环境搭建之串口调试、网络连接以及sftp文件传输
前言 搭建Hi3516的基础虚拟机,为交叉编译环境搭建前期工作.后续会编译一个基本的C语言程序Demo,在HI3516上跑. 虚拟机 开发本对虚拟机做了一些基本要求,如下图: 其实重 ...
- [hdu7033]Typing Contest
为了避免浮点运算,不妨将$f_{i}$乘上$C=10^{2}$,问题即求$\max_{S\subseteq [1,n]}\frac{\sum_{i\in S}(C^{2}-(\sum_{j ...
- [hdu6580]Milk
考虑定义以下dp数组:1.g1[i][j]表示第i行从中间出发向左取j瓶牛奶最少要多久2.g2[i][j]表示第i行从中间出发向右取j瓶牛奶最少要多久3.g3[i][j]表示在g1[i][j]的基础上 ...
- [bzoj1135]Lyz
可以看成一张二分图,判断左半部分是否存在完美匹配根据hall定理,当且仅当左半部分每一个子集所连向的点数量超过了这个子集的大小都判定复杂度肯定爆炸,可以贪心,一定选择的是一个区间,即对于任意区间[l, ...
- idea Error: java: OutOfMemoryError: insufficient memory 的处理
idea Error: java: OutOfMemoryError: insufficient memory处理 在更新项目代码或者运行项目时报错 OutOfMemoryError: insuffi ...