您的位置:首页 > Web前端 > JQuery

jquery.dataTable分页

2016-04-01 15:50 567 查看
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>'
//                        +'   <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>


最后结果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: