时间戳

首页 > 技术文章 > jquery.dataTable分页

jquery.dataTable分页

zrui-xyu 2016-04-01 15:50 原文

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>

最后结果如下：

 

 

推荐阅读