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,
			//开启是否显示处理状态