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: ...
随机推荐
- 重装系统——联想window 10
大四了,读了四年大学,唉,混的,啥也不会,工作也找不到,真的不知道这大学四年到底干了什么.专业是计算机方向的,但居然,不敢,也不会装电脑系统,大学四年的文件都是乱放的,更那个的是,有些软件卸载不完全, ...
- Obsidian中如何记录自己的灵感？
在生活中当中你是否会在某个瞬间产生一个想法,但没过多久就想不起来了,正所谓灵感转瞬即逝,那我们不妨在灵感出现的时候顺手将他记录下来.记录的过程要求简单.方便且不会花费我们太多时间,下面我们介绍一下如何 ...
- 『学了就忘』Linux基础命令 — 35、网络中与其他机器通信的命令
目录 1.write命令 2.wall命令 3.mail 命令 使用1:发送邮件 使用2:查看已经接收的邮件 使用3:发送文件内容 1.write命令 (1)write命令的基本信息 命令名称:wri ...
- OpenXml SDK学习笔记（4）：设置文件级别的样式
观察上一段日记最后的代码: 这里的样式基本可以理解为行内CSS.那么既然有行内的样式,就肯定有外部的样式.那这部分就对应笔记1里说的style.xml文件.这个文件对应的是Document.MainD ...
- celery config
/* Useful celery config. app = Celery('tasks', broker='redis://localhost:6379', backend='redis://loc ...
- Ubuntu更换python版本
Ubuntu更换python版本 ubuntu服务器自带的python版本是python3.6,在运行jwt包时会有版本问题,所以安装和本地相同的python版本=>python3.7 安装py ...
- IntelliJ IDEA竟然出了可以在云端编码的功能？
前言 自从我用了正版的IntelliJ IDEA后,基本上都是与时俱进,出一个新版本就立马更新,这也能能让我体验到最新最快的功能. 最近在闲逛Jetbrains的官网时,看到了最新的2021.3EAP ...
- Python进阶（多线程）
多线程结构 import threading def worker():#子线程要执行的具体逻辑代码函数 print('threading') t1 = threading.current_threa ...
- python有关于图像的深度和通道
目录: (一)图像的深度和图像的通道 (1)图像的深度 (2)图像的通道 (二)自定义一张多通道的图片 (1)zeros 函数 (2)ones 函数 (三)自定义一张单通道的图片 (四)像素操作 ...
- 洛谷 P4900 - 食堂（推式子）
洛谷题面传送门 首先推式子: \[\begin{aligned} ans&=\sum\limits_{i=A}^B\sum\limits_{j=1}^i\{\dfrac{i}{j}\} \en ...