DataTables自行封装请求参数和返回数据的零耦合服务端分页
使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能直接适用于需要跟多种不同前端或其他业务交互的项目。本例子主要展示了自行封装请求参数和返回数据的用法,对后台的交互没有任何格式和命名限制。
基于Bootstrap 2.3.2,相关的其他插件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版)
主要展现:
封装请求参数(查询、排序、分页,不再需要data和dataSrc)
封装返回数据
自定义查询参数
服务器分页
自行控制和自定义遮罩效果
生成自定义效果的单元格(在线离线)
生成复选框单元格
响应复选框选择事件
生成操作按钮单元格
响应操作栏按钮点击事件
响应行点击事件
渲染回调事件(默认选中第一行)
分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css)
代码片段和文件信息
属性 大小 日期 时间 名称
----------- --------- ---------- ----- ----
文件 652 2015-05-27 15:38 DataTablesCustom.classpath
文件 1341 2015-05-27 19:45 DataTablesCustom.project
文件 522 2015-05-27 15:37 DataTablesCustom.settings.jsdtscope
文件 364 2015-05-27 15:38 DataTablesCustom.settingsorg.eclipse.jdt.core.prefs
文件 507 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.common.component
文件 414 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.common.project.facet.core.xml
文件 49 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.jsdt.ui.superType.container
文件 6 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.jsdt.ui.superType.name
文件 757 2015-05-28 16:18 DataTablesCustom
eadme.txt
文件 1885 2015-05-28 10:21 DataTablesCustomsrccom hxopendteanUser.java
文件 1023 2015-05-28 08:53 DataTablesCustomsrccom hxopendtsysConfig.java
文件 2705 2015-05-28 10:36 DataTablesCustomWebRootassetcssuser-manage.css
文件 1393 2015-05-28 15:20 DataTablesCustomWebRootassetjsconstant.js
文件 9161 2015-05-28 15:59 DataTablesCustomWebRootassetjsuser-manage.js
文件 22102 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap-responsive.css
文件 16840 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap-responsive.min.css
文件 127343 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap.css
文件 106006 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap.min.css
文件 8777 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2imgglyphicons-halflings-white.png
文件 12799 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2imgglyphicons-halflings.png
文件 61884 2015-05-27 15:40 DataTablesCustomWebRootassetlibootstrap-2.3.2jsootstrap.js
文件 28631 2015-05-27 15:40 DataTablesCustomWebRootassetlibootstrap-2.3.2jsootstrap.min.js
文件 15384 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediacssjquery.dataTables.css
文件 13429 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediacssjquery.dataTables.min.css
文件 14229 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediacssjquery.dataTables_themeroller.css
文件 894 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagesfavicon.ico
文件 27490 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagesSorting icons.psd
文件 160 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagessort_asc.png
文件 148 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagessort_asc_disabled.png
文件 201 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagessort_both.png
............此处省略106个文件信息
package com.thxopen.dt.bean;
/**
* Created by Administrator on 2015/4/13.
*/
public class User {
public String name;
public String position;
public String salary;
public String start_date;
public String office;
public String extn;
public Integer status;
public Integer role;
public User(String name String position String salary String start_date String office String extn Integer status Integer role) {
this.name = name;
this.position = position;
this.salary = salary;
this.start_date = start_date;
this.office = office;
this.extn = extn;
this.status = status;
this.role = role;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPosition() {
return position;
}
public void setPosition(String position) {
this.position = position;
}
public String getSalary() {
return salary;
}
public void setSalary(String salary) {
this.salary = salary;
}
public String getStart_date() {
return start_date;
}
public void setStart_date(String start_date) {
this.start_date = start_date;
}
public String getOffice() {
return office;
}
public void setOffice(String office) {
this.office = office;
}
public String getExtn() {
return extn;
}
public void setExtn(String extn) {
this.extn = extn;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public Integer getRole() {
return role;
}
public void setRole(Integer role) {
this.role = role;
}
}
属性 大小 日期 时间 名称
----------- --------- ---------- ----- ----
文件 652 2015-05-27 15:38 DataTablesCustom.classpath
文件 1341 2015-05-27 19:45 DataTablesCustom.project
文件 522 2015-05-27 15:37 DataTablesCustom.settings.jsdtscope
文件 364 2015-05-27 15:38 DataTablesCustom.settingsorg.eclipse.jdt.core.prefs
文件 507 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.common.component
文件 414 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.common.project.facet.core.xm
文件 49 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.jsdt.ui.superType.container
文件 6 2015-05-27 15:37 DataTablesCustom.settingsorg.eclipse.wst.jsdt.ui.superType.name
文件 757 2015-05-28 16:18 DataTablesCustom
eadme.txt
文件 1885 2015-05-28 10:21 DataTablesCustomsrccom hxopendteanUser.java
文件 1023 2015-05-28 08:53 DataTablesCustomsrccom hxopendtsysConfig.java
文件 2705 2015-05-28 10:36 DataTablesCustomWebRootassetcssuser-manage.css
文件 1393 2015-05-28 15:20 DataTablesCustomWebRootassetjsconstant.js
文件 9161 2015-05-28 15:59 DataTablesCustomWebRootassetjsuser-manage.js
文件 22102 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap-responsive.css
文件 16840 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap-responsive.min.css
文件 127343 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap.css
文件 106006 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2cssootstrap.min.css
文件 8777 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2imgglyphicons-halflings-white.png
文件 12799 2015-05-12 10:37 DataTablesCustomWebRootassetlibootstrap-2.3.2imgglyphicons-halflings.png
文件 61884 2015-05-27 15:40 DataTablesCustomWebRootassetlibootstrap-2.3.2jsootstrap.js
文件 28631 2015-05-27 15:40 DataTablesCustomWebRootassetlibootstrap-2.3.2jsootstrap.min.js
文件 15384 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediacssjquery.dataTables.css
文件 13429 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediacssjquery.dataTables.min.css
文件 14229 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediacssjquery.dataTables_themeroller.css
文件 894 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagesfavicon.ico
文件 27490 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagesSorting icons.psd
文件 160 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagessort_asc.png
文件 148 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagessort_asc_disabled.png
文件 201 2015-05-20 20:15 DataTablesCustomWebRootassetlibdataTables-1.10.7mediaimagessort_both.png
............此处省略106个文件信息
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。
评论列表(条)