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: ...
随机推荐
- React + 导入模块的一个错误
导入模块的时候出现这个错误: Attempted import error: 'd3' does not contain a default export (imported as 'd3'). 把导 ...
- PTA 7-2 邻接表创建无向图 (20分)
PTA 7-2 邻接表创建无向图 (20分) 采用邻接表创建无向图G ,依次输出各顶点的度. 输入格式: 输入第一行中给出2个整数i(0<i≤10),j(j≥0),分别为图G的顶点数和边数. 输 ...
- Linux ns 6. Network Namespace 详解
文章目录 1. 简介 1.1 Docker Network 桥接模式配置 2. 代码解析 2.1 copy_net_ns() 2.2 pernet_list 2.2.1 loopback_net_op ...
- redis-sentinel "DENIED Redis is running in protected mode"
protected-mode no in sentinel.conf https://github.com/antirez/redis/issues/3106
- Kafka面试题总结
1.Kafka 都有哪些特点? 高吞吐量.低延迟:kafka每秒可以处理几十万条消息,它的延迟最低只有几毫秒,每个topic可以分多个partition, consumer group 对partit ...
- 什么是齐博x1标签
X系列的标签跟V系列的标签区别还是很大的.在V系列的时候,只有一种很简单的标签比如$label[XXXX]以前的标签相对现在的来说太简单的点,所以在功能上也比较受限.X系列目前有几下几种标签 {qb: ...
- Django 小实例S1 简易学生选课管理系统 1 项目流程梳理与数据库设计
Django 小实例S1 简易学生选课管理系统 第1章--项目流程梳理与数据库设计 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 1 项目流程梳理 ...
- 详解电子表格中的json数据：序列化与反序列化
从XML到JSON 当下应用开发常见的B/S架构之下,我们会遇到很多需要进行前后端数据传输的场景.而在这个传输的过程中,数据通过何种格式传输.方式是否迅速便捷.书写方式是否简单易学,都成为了程序员在开 ...
- requests之代理的使用
import requests # 访问url url = 'http://www.baidu.com/s?' # 请求头 headers = { 'User-Agent': 'Mozilla/5.0 ...
- [spojQTREE7]Query on a tree VII
即QTREE5和QTREE6组合,即将原本维护子树范围内点数改为维护子树范围内最小值即可,由于最小值没有可减性,因此需要使用set (虽然形式上与QTREE5类似,但QTREE5维护的信息更巧妙一些, ...