SSM框架+js：查询某段时间范围内的数据

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

需求

• 查询条件为时间区间，实际数据为具体日期。
• 选择时间范围后，下面数据会筛选出范围内的数据刷新显示。

数据库表字段

JAVA实体类

private Date claimDate;		// 索赔日期

• 因为需要接收前端两个时间（起、止） ，所以实体类需要添加两个字段作为程序判断使用。
• 使用字符串格式

private String claimDateStart; //范围起期
private String claimDateEnd;   //范围止期

SQL语句（SSM框架，oracle数据库）

<select id="findList" resultType="......实体类所在路径...">
	SELECT 
		...
	FROM 
		表名 a --别名为a
	<where>
		...
		<if test="claimDateStart !=null and claimDateStart != ''">
			AND a.claim_date<![CDATA[>=]]> to_date(#{claimDateStart},'yyyy-MM-dd')
		</if>
		<if test="claimDateEnd !=null and claimDateEnd != ''">
			AND a.claim_date<![CDATA[<=]]> to_date(#{claimDateEnd},'yyyy-MM-dd')
			--#{claimDateEnd} 为前端传来、并且是用实体类String类型属性接收的，所以此时要转化成时间格式
		</if>
	</where>
</select>

• 在使用mybatis 时sql是写在xml 映射文件中，如果写的sql中有一些特殊的字符的话，在解析xml文件的时候会被转义，如果不希望被转义，要使用来解决。
• 是什么？ 是XML语法。在CDATA内部的所有内容会被解析器忽略。
• 如果文本包含了"<“字符 <=和”&"等字符，要使用来避免解析
• to_date （把字符类型转为时间类型） 函数使用：

SELECT TO_DATE('2006-05-01 19:25:34', 'YYYY-MM-DD HH24:MI:SS') FROM 表名;
--注意：SQL中不区分大小写，MM和mm被认为是相同的格式代码，所以Oracle的SQL采用了mi代替分钟
--此方法将String类型的数据转换成Date类型

DAO接口

@MyBatisDao
public interface XXXXDao{
	//sql语句的id 就是findList T泛指类型 此处代表这个实体类对象
	public List<T> findList(T entity);
}

Service层

@Service
@Transactional(readOnly = true)
public class XXXXService{
	public List<实体类T> findList(T entity) {
		return XXXXDao.findList(entity);
	}
}

Controller 层

//此处使用layUI框架封装
@RequestMapping(value = {"listData"})
@ResponseBody
public Layui listData(T entity) {
	Page<实体类> page = XXXXService.findPage(new Page(entity), entity);
	return Layui.data(page);
}

前端JSP

<div class="span3">
	<span class="label-none">索赔日期： </span>
	<input id="claimDateStart"
		name="claimDateStart" type="text" style="width: 85px;"
		maxlength="20" readonly="readonly" class="input-min Wdate"
		value="<fmt:formatDate value="${bsPersonClaimCase.claimDateStart}" 
		pattern="yyyy-MM-dd"/>"
		onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"
		onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,maxDate:'#F{$dp.$D(\'claimDateEnd\')}'});"/>
		— 
	<input id="claimDateEnd" name="claimDateEnd" type="text"
		style="width: 85px;" maxlength="20" readonly="readonly"
		class="input-min Wdate"
		value="<fmt:formatDate value="${bsPersonClaimCase.claimDateEnd}" pattern="yyyy-MM-dd"/>"
		onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,minDate:'#F{$dp.$D(\'claimDateStart\')}'});" />
	
</div>
//注：WdatePicker()封装的函数方法点击获取时间
___________________按钮________________绑定函数(点击事件)___________________
<a class="btn btn-primary" onclick="toSearch()">查询</a>

前端JS

<script>
function toSearch(){
	//获取数据所在表格为table
    var table = layui.table;
    //layUI方法重新加载
	table.reload('数据所在列表的ID', {
	   //查询条件为：
		where: {
			//此处省略其它查询条件...
			claimDateStart:$("#claimDateStart").val(),
			claimDateEnd:$("#claimDateEnd").val()    	  
		},
		page: {
			curr: 1 //重新从第 1 页开始
		}
	});	      					
}
</script>