jQuery插件-datatables的使用

优点：可以实现自动分页、数据过滤、数据筛选、自动处理列宽（可以不使用从而提高效率）、可以通过css定制样式、可扩展性和灵活性、国际化（可以使用多国语言）、动态创建表格、免费（！！）

使用：（1）基于jQuery，所以需要引入jQuery文件，引入datatables的css文件和js文件

<!--jQuery-->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jq/jquery-3.3.1.min.js"></scrip>
<!--datatables两个文件-->
<link href="<%=request.getContextPath()%>/js/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/DataTables/js/jquery.dataTables.min.js"></script>
<!--如果使用了日期需要引入-->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/date-format.js"></script>

（2）创建表格，准备初始化 通过jQuery获取到创建的表格，也就是需要使用datatables的表格，通过jQuery选择器选择到需要使用到datatables的表格，通过DataTable方法传入相应配置，  需要拼接表格

//前台页面展示表格
<table id="foodTable">
	<thead>
		<tr>
			<th>
				<input type="checkbox" id="checkAll">
			</th>
			<th>食物图片</th>
			<th>食物名称</th>
			<th>食物上下架</th>
			<th>食物地区</th>
			<th>食物类型</th>
			<th>食物时间</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
				
	</tbody>
</table>

    function selectFood(){
        //这里通过jQuery选择展示表格的位置
		$("#foodTable").DataTable({
			//开启服务端模式   就是服务端过滤、分页、排序等
			serverSide:true,
			//开启是否显示处理状态
			processing:true,
			//进行国际化处理配置
  			language: {
		        "sProcessing": "处理中...",
		        "sLengthMenu": "显示 _MENU_ 项结果",
		        "sZeroRecords": "没有匹配结果",
		        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
		        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
		        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
		        "sInfoPostFix": "",
		        "sSearch": "搜索",
		        "sUrl": "",
		        "sEmptyTable": "表中数据为空",
		        "sLoadingRecords": "载入中...",
		        "sInfoThousands": ",",
		        "oPaginate": {
		            "sFirst": "首页",
		            "sPrevious": "上一页",
		            "sNext": "下一页",
		            "sLast": "末页"
		        },
		        "oAria": {
		            "sSortAscending": ": 以升序排列此列",
		            "sSortDescending": ": 以降序排列此列"
		        }
		    },
		    //是否开启显示搜索框
		    searching:false,
		    //设置每页显示条数
		    lengthMenu:[5,10,15,25],


            //向后台请求数据
		    ajax:{
				type:"post",
				dataType:"json",
				url:"<%=request.getContextPath()%>/FoodController/selectFood.do"
			},


            //设置前台每列展示的内容 需要拼接
			"columns":[
					//第一列  全选框
					{
						"data":"foodId","render":function(data){
							return "<input type=\"checkbox\" name=\"plsc\" value=\""+data+"\" >";
						}

					},
					//第二列 图片
					{
						"data":"foodFileNameArr","render":function(data){
							if(data !=null && data.length>0){
								var image="";
								for(var i=0; i<data.length;i++){
									image+="<img src='<%=request.getContextPath()%>/"+data[i]+"' width='50px' height='50px'>";
								}
								return image;
							}else{
								return data;
							}
						}
					},
					//第三列 食物名称
					{"data":"foodName"},
					//第四列 是否上下架
					{
						"data":"foodIsUp","render":function(data){
							return data==1?"是":"否";
						}
					},
					//第五列  地区
					{
						"data":"foodArea","render":function(data){
							return data.replace("1","河南").replace("2","河北").replace("3","山东").replace("4","山西");
						}
					},
					//第六列 类型
					{"data":"foodType.foodTypeName"},
					{"data":"foodTime","render":function(data){
							return datetimeFormat_2(data);
						}
					},
					//第七列 按钮
					{
						"data":"foodId","render":function(data){
								return  '<div class="btn-group btn-group-xs">'+
											'<button type="button" onclick="toUpdateFood('+data+')" class="btn btn-primary">'+
											'	<span class="glyphicon glyphicon-pencil"></span>&nbsp;修改'+
											'</button>'+
											'<button type="button" onclick="deleteFood('+data+')" class="btn btn-danger">'+
											'	<span class="glyphicon glyphicon-trash"></span>&nbsp;删除'+
											'</button>'+
											'<button type="button" onclick="updateIsUp('+data+',2)" class="btn btn-danger">'+
											'	<span class="glyphicon glyphicon-trash"></span>&nbsp;下架'+
											'</button>'+
										'</div>';
						}

					}
			]
			
		})
	}
	

（3）后台接受请求 分页

    //在controller中通过service请求数据库，其中pagebean中包含着需要向后台返回的所有数据
        @RequestMapping("selectFood")
	@ResponseBody
	public PageBean<Food> selectFood(FoodVo foodVo,PageBean<Food> page){
		page = foodService.selectFood(foodVo,page);
		return page;
	}

    //给所有需要返回的值赋值
    public PageBean selectFood(FoodVo foodVo, PageBean page) {
		String hql=" from Food where 1=1";
		List<Object> valueList = new ArrayList<Object>();
		if(foodVo !=null){
			if(StringUtils.isNotBlank(foodVo.getFoodName())){
				hql+=" and foodName like ?";
				valueList.add("%"+foodVo.getFoodName()+"%");
			}
			if(foodVo.getFoodIsUp() !=null){
				hql+=" and foodIsUp = ?";
				valueList.add(foodVo.getFoodIsUp());
			}
			if(foodVo.getFoodTypeId() !=null && foodVo.getFoodTypeId() !=-1){
				hql+=" and foodType.foodTypeId =?";
				valueList.add(foodVo.getFoodTypeId());
			}
			if(foodVo.getBeginDate() !=null){
				hql+=" and foodTime >=?";
				valueList.add(foodVo.getBeginDate());
			}
			if(foodVo.getEndDate() !=null){
				hql+=" and foodTime <=?";
				valueList.add(foodVo.getEndDate());
			}
			if(foodVo.getFoodArea() !=null && foodVo.getFoodArea().length>0){
				for (String str : foodVo.getFoodArea()) {
					hql+=" and foodArea like ?";
					valueList.add("%"+str+"%");
				}
			}
		}
		hql+=" order by foodName DESC,foodIsUp ASC";
		Query createQuery = this.getHibernateTemplate().getSessionFactory().getCurrentSession().createQuery(hql);
		for (int i = 0; i < valueList.size(); i++) {
			createQuery.setParameter(i, valueList.get(i));
		}
		page.setRecordsFiltered((long) createQuery.list().size());
		page.setRecordsTotal((long) createQuery.list().size());
		createQuery.setFirstResult(page.getStart());
		createQuery.setMaxResults(page.getLength());
		List<Food> foodList = createQuery.list();
		page.setData(foodList);
		return page;
	}


//需要向前台返回的所有数据
package com.fh.util;

import java.util.List;

public class PageBean<T> {
	
	//总条数
	private Long recordsTotal;
	private Long recordsFiltered;
	//每页条数
	private Integer length;
	//当前页数
	private Integer draw;
	//起始下标
	private Integer start;
	
	private List<T> data;

	

	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 Integer getLength() {
		return length;
	}

	public void setLength(Integer length) {
		this.length = length;
	}

	public Integer getDraw() {
		return draw;
	}

	public void setDraw(Integer draw) {
		this.draw = draw;
	}

	public Integer getStart() {
		return start;
	}

	public void setStart(Integer start) {
		this.start = start;
	}

	public List<T> getData() {
		return data;
	}

	public void setData(List<T> data) {
		this.data = data;
	}
	
}

serverside：开启服务端模式（把分页交给服务器完成，提高前台加载效率）

processing：加载过程提示