jsp页面,引入几个js

<link type="text/css" rel="stylesheet" href="/library/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/library/plugins/datatables/dataTables.bootstrap.css">
<script type="text/javascript" src="/library/plugins/datatables/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="/library/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/library/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/library/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="/library/plugins/datatables/common.js"></script> var ctx = "${pageContext.request.contextPath}";

并且写一个用于分页的table

<div style="margin-top:30px;width:40%;float:left;"><h3>签到情况</h3><table style="width:100%;" id="singIn"></table></div>

再写一个操作js,如下:

$(function(){
//查询签到、签退情况
loadTable(1);
//签到
$("#signIn").click(function(){
$("#checkType").val("1");
$("#signForm").submit();
});
//签退
$("#signOut").click(function(){
$("#checkType").val("2");
$("#signForm").submit();
});
});
//分页
function loadTable(checkType){
var columns = [
{"data": "inTime",header:"签到时间"},
{"data": "checkType",header:"签到"}
];
var params = {checkType:checkType};
//判断上传按钮权限-----------------------------
var buttons;
//buttons = {add:{fun:"upload",text:"上传文件"}};
//-----------------------------------------
var columnDefs ={
/* checkbox:true,
button:{
del:{//删除按钮
fun:"deleteFunction",//删除方法名称
text:"删除"
},
edit:{//修改按钮
fun:"editFunction",
text:"修改"
},
add:{
fun:"upload",
text:"上传文件"
}
},*/
button:buttons,
main:[{
"targets": 0,
render: function (a, b, c, d) {
return format(c.inTime,'yyyy-MM-dd HH:mm:ss');
}
},{
"targets":1//,
// render: function (a, b, c, d){
// return '<a style="color:#fff;" class="btn btn-primary btn-sm" href="${pageContext.request.contextPath}/jsp/scorm/updateScorm.jsp?id='+c.id+'&name='+c.name+'&intro='+encodeURI(encodeURI(c.intro))+'&timeopen='+c.timeopen+'&timeclose='+c.timeclose+'&maxgrade='+c.maxgrade+'&grademethod='+c.grademethod+'">修改</a>'
// +'&nbsp;&nbsp;&nbsp;<a style="color:#fff;" class="btn btn-primary btn-sm" href="javascript:if(confirm(\'你确定删除吗?\'))window.location.href=\'${pageContext.request.contextPath}/scorm/deleteScorm?id='+c.id+'\'">删除</a>';
// }
}] };
table = $("#singIn").table({ url:ctx+"/bankCheck/findSign",
params:params,
columns:columns,
columnDefs:columnDefs,
iDisplayLength:15
});
}
var format = function(time, format){
var t = new Date(time);
var tf = function(i){return (i < 10 ? '0' : '') + i};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
switch(a){
case 'yyyy':
return tf(t.getFullYear());
break;
case 'MM':
return tf(t.getMonth() + 1);
break;
case 'mm':
return tf(t.getMinutes());
break;
case 'dd':
return tf(t.getDate());
break;
case 'HH':
return tf(t.getHours());
break;
case 'ss':
return tf(t.getSeconds());
break;
}
})
}
  //if(valContent()){
   //         $.post(ctx+"/field/updateField",{fieldId:fieldId,fieldType:fieldType1,fieldName:fieldName1,orderNumber:orderNumber1,isDisable:isDisable1,remark:remark1},function(msg){
   //             if(msg.success){
   //                 table.reload(); --------------------table.reload()可用
   //                 $("#updateModal").modal('hide');
   //             }
   //         });
  //      }

后台controller如下:

/**
* 描述:查询签到、签退列表
* @param start
* @param length
* @param tempStr
* @return
*/
@RequestMapping("/findSign")
@ResponseBody
public GridReturn findSign(Integer start,Integer length,Integer checkType){
GridReturn gr = service.findSign(start, length,checkType);
return gr;
}

GridReturn如下:

package com.yunzainfo.common.pojo;

import java.util.List;

public class GridReturn {

    private int draw;//请求次数
private long recordsTotal;//总记录数
private long recordsFiltered;//过滤后记录数
private List<?> data; public GridReturn(int draw,long recordsTotal,long recordsFiltered,List<?> data){
this.data=data;
this.draw=draw;
this.recordsFiltered=recordsFiltered;
this.recordsTotal=recordsTotal;
} public int getDraw() {
return draw;
}
public void setDraw(int draw) {
this.draw = draw;
}
public long getRecordsTotal() {
return recordsTotal;
}
public void setRecordsTotal(long recordsTotal) {
this.recordsTotal = recordsTotal;
}
public long getRecordsFiltered() {
return recordsFiltered;
}
public void setRecordsFiltered(long recordsFiltered) {
this.recordsFiltered = recordsFiltered;
}
public List<?> getData() {
return data;
}
public void setData(List<?> data) {
this.data = data;
} }

service如下:

    @Override
public GridReturn findSign(Integer start, Integer length,Integer checkType) {
//获取userId
String userId = userDirectoryService.getCurrentUser().getId();
//获取siteId
String siteId = "";
try {
siteId = siteService.getSite(toolManager.getCurrentPlacement().getContext()).getId();
} catch (IdUnusedException e) {
e.printStackTrace();
}
Criteria criteria = new Criteria();
if(start!=null && length!=null){
criteria.setStart(start);
criteria.setLimit(length);
}
if(StringUtils.isNotBlank(siteId)){
criteria.put("siteId", siteId);
}
criteria.put("checkType", checkType);
criteria.put("userId", userId);
List<BankCheck> list = mapper.findList(criteria);
int total = mapper.getTotalCount(criteria);
GridReturn gridReturn = new GridReturn(criteria.getDraw(), total, total, list);
return gridReturn;
}

mapper如下:

<!-- 查询今天签到状态  -->
<select id="findList" parameterType="org.sakaiproject.util.Criteria"
resultType="com.yunzainfo.bank.module.bankCheck.pojo.BankCheck">
SELECT
check_id checkId,
in_time inTime,
out_time outTime,
user_id userId,
check_type checkType,
site_id siteId
FROM
bank_check
<where>
<if test="condition.checkId!=null">and check_id=#{condition.checkId}</if>
<if test="condition.inTime!=null">and in_time=#{condition.inTime}</if>
<if test="condition.outTime!=null">and out_time=#{condition.outTime}</if>
<if test="condition.userId!='' and condition.userId!=null">and user_id=#{condition.userId}</if>
<if test="condition.checkType!=null">and check_type=#{condition.checkType}</if>
<if test="condition.siteId!='' and condition.siteId!=null">and site_id=#{condition.siteId}</if>
</where>
order by in_time DESC,out_time DESC
<if test="limit!=0">limit #{start},#{limit}</if>
</select> <select id="getTotalCount" parameterType="org.sakaiproject.util.Criteria"
resultType="java.lang.Integer">
SELECT count(1)
FROM
bank_check
<where>
<if test="condition.checkId!=null">and check_id=#{condition.checkId}</if>
<if test="condition.inTime!=null">and in_time=#{condition.inTime}</if>
<if test="condition.outTime!=null">and out_time=#{condition.outTime},</if>
<if test="condition.userId!=''and condition.userId!=null">and user_id=#{condition.userId}</if>
<if test="condition.checkType!=null">and check_type=#{condition.checkType}</if>
<if test="condition.siteId!='' and condition.siteId!=null">and site_id=#{condition.siteId}</if>
</where>
</select>

最后结果如下:

jquery.dataTable分页的更多相关文章

  1. jquery datatable 获取当前分页的数据

    使用jquery datatable 遇到分页分别求和时,找了半天才找到获取当前分页数据的方法,以此总结 var table=$('#example').DataTable( { "pagi ...

  2. jquery datatable如何动态分页

    展开全部 一.分页 分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果. 这里需要用到datatable插件的几个属性: &qu ...

  3. 使用jQuery开发datatable分页表格插件

    当系统数据量很大时,前端的分页.异步获取方式就成了较好的解决方案.一直以来,我都希望使用自己开发的 jquery 插件做系统. 现在,学习了 jquery 插件开发之后,渐渐地也自己去尝试着开发一些简 ...

  4. 分享在MVC3.0中使用jQuery DataTable 插件

    前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...

  5. JQuery Datatable用法

    原文出处:http://sgyyz.blog.51cto.com/5069360/1408251 目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求 ...

  6. jQuery Datatable 转载

    jQuery Datatable 实用简单实例 时间 2014-05-08 10:44:18  51CTO推荐博文 原文  http://sgyyz.blog.51cto.com/5069360/14 ...

  7. 使用jquery.datatable.js注意事项

    本文链接:https://blog.csdn.net/ylg01/article/details/76463908写在最前面的话,如果不是维护老项目或者在老项目上二次开发尽量不要用这个表格插件 为什么 ...

  8. jquery datatable使用简单示例

    目标: 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. Query ...

  9. jquery dataTable汉化(插件形式)

    1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...

随机推荐

  1. 继承IDbConnection连接不同数据库

    继承IDbConnection连接不同数据库 本方案可实现仅修改app.config即可连接不同数据库,但是设计数据库时需要注意各种数据库的数据类型是不一样的. 各种不同数据库的Connection. ...

  2. [译]git reflog

    用法 git reflog 显示整个本地仓储的commit, 包括所有branch的commit, 甚至包括已经撤销的commit, 只要HEAD发生了变化, 就会在reflog里面看得到. git ...

  3. ASP.NET Core -- 安装版

    首先安装的→Visual Studio Community 原文地址 本来觉得安装了vs 就可以了,,结果一直报错,,,太天真... 接下来还要安装 →NuGet.Tools.vsix →DotNet ...

  4. xcode的调试技巧

    转自:http://www.cnblogs.com/daiweilai/p/4421340.html#biyouji 目录 前言逼优鸡知己知彼 百战不殆抽刀断Bug 普通操作 全局断点(Global ...

  5. Sublime多行编辑快捷键

    鼠标选中多行,按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行: 鼠标选中文本,反复按 CTRL D (Command D) 即可继续向下同时选中下一个相同的文本 ...

  6. linux 学习之路

    很多同学接触Linux不多,对Linux平台的开发更是一无所知. 而现在的趋势越来越表明,作为一个优秀的软件开发人员,或计算机IT行业从业人员, 掌握Linux是一种很重要的谋生资源与手段. 下来我将 ...

  7. iOS开发——UI进阶篇(四)tableView的全局刷新,局部刷新,左滑操作,左滑出现更多按钮,进入编辑模式,批量删除,自定义批量删除

    首先创建项目,在storyboard如下布局控件,设置好约束 然后创建cell模型类XMGWineCell数据模型类XMGWine创建UITableView,设置数据源协议,实现数据源方法懒加载数据这 ...

  8. SNMP详解

    简单网络管理协议(SNMP)是TCP/IP协议簇的一个应用层协议.在1988年被制定,并被Internet体系结构委员会(IAB)采纳作为一个短期的网络管理解决方案:由于SNMP的简单性,在Inter ...

  9. OpenCV图像轮廓检测

    轮廓检测: 轮廓检测的原理通俗的说就是掏空内部点,比如原图中有3*3的矩形点.那么就可以将中间的那一点去掉. 一.关键函数1.1  cvFindContours函数功能:对图像进行轮廓检测,这个函数将 ...

  10. HackerRank savita-and-friends

    Description 在一条边上求一个点,使得这个点到所有点的最长的最短距离 最短. \(n \leqslant 10^5\) Sol Dijkstra+扫描线+单调队列. 这个好像叫什么最小直径生 ...