jquery.dataTable分页
2016-04-01 15:50
567 查看
jsp页面,引入几个js
并且写一个用于分页的table
再写一个操作js,如下:
后台controller如下:
GridReturn如下:
service如下:
mapper如下:
最后结果如下:
<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>' // +' <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>
最后结果如下:
相关文章推荐
- PHP学习(五)----jQuery和JSON数据
- jquery easyui datagrid请求两次或多次的问题解决方法
- 10分钟-jQuery过滤选择器
- JQuery中$.ajax()方法参数
- Jquery表单验证插件formValidator使用方法
- jquery分页插件jquery.pagination.js实现无刷新分页
- 贫下中农版jQuery
- jquery分页插件jquery.pagination.js使用方法解析
- 用jquery控制span显示几个字符
- jQuery实现下拉加载功能实例代码
- 使用jQuery Validation插件来验证表单
- Jquery join()
- jQuery validate验证隐藏表单(hidden)域
- jquery 遮罩层指定位置
- jQuery使用笔记
- 10分钟-jQuery-基础选择器
- jquery中$.post()方法的简单实例
- JQuery和ASP.NET分别实现级联下拉框效果
- 实例讲解jQuery EasyUI tree中state属性慎用
- jQuery插件infinitescroll参数【无限翻页】