JQuery使用Datatable插件（一）——简单使用(使用假数据本地分页)

最新推荐文章于 2024-08-01 11:09:48 发布

ACodeBird

最新推荐文章于 2024-08-01 11:09:48 发布

阅读量1.2k

点赞数 1

分类专栏：小记文章标签： datatable jquery

本文链接：https://blog.csdn.net/ChOLg/article/details/95326534

版权

小记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、首先需要引入datatable的css样式文件和引入jquery.js和datatable的js文件（datatable时基于jquery实现的，所以需要引入jquery.js）

datatable相关文件可以到到官网下载：http://www.datatables.club/

二、html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Datatable的初步使用</title>
<!-- 引入datatable的css样式文件 -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/views/admin/css/jquery.dataTables.css">
<!--  引入jquery.js和datatable的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/views/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/views/admin/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/views/admin/js/myDatatable.js"></script>
</head>
<body>
 <table id="myDatatable" style='margin-bottom:0;text-align: center'>
      <thead>
          <tr>
              <th><input type="checkbox" id="checkAll" name="checkAll" /></th>
              <th>
                  ID
              </th>
              <th>
                  用户名
              </th>
              <th>
                  用户头像
              </th>
              <th>
                  联系电话
              </th>
              <th>
                  邮箱
              </th>
              <th>
                  创建时间
              </th>
              <th>
                  状态
              </th>
              <th>
                  操作
              </th>
          </tr>
      </thead>
      <!--  假数据-->
      <tbody>
               <tr>
               		<td>
               			<input type="checkbox" id="checkAll" name="checkAll"/>
               		</td>
               		<td>1</td>
               		<td>小明</td>
               		<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
               		<td>1311214545</td>
               		<td>1311214545@qq.com</td>
               		<td>2019/02/45 12:40:07</td>
               		<td>有效</td>
               		<td>doSomething</td>
               </tr>
               <tr>
               		<td>
               			<input type="checkbox" id="checkAll" name="checkAll"/>
               		</td>
               		<td>1</td>
               		<td>小明</td>
               		<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
               		<td>1311214545</td>
               		<td>1311214545@qq.com</td>
               		<td>2019/02/45 12:40:07</td>
               		<td>有效</td>
               		<td>doSomething</td>
               </tr>
               <tr>
               		<td>
               			<input type="checkbox" id="checkAll" name="checkAll"/>
               		</td>
               		<td>3</td>
               		<td>小明</td>
               		<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
               		<td>1311214545</td>
               		<td>1311214545@qq.com</td>
               		<td>2019/02/45 12:40:07</td>
               		<td>有效</td>
               		<td>doSomething</td>
               </tr>
               <tr>
               		<td>
               			<input type="checkbox" id="checkAll" name="checkAll"/>
               		</td>
               		<td>3</td>
               		<td>小明</td>
               		<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
               		<td>1311214545</td>
               		<td>1311214545@qq.com</td>
               		<td>2019/02/45 12:40:07</td>
               		<td>有效</td>
               		<td>doSomething</td>
               </tr>
      </tbody>
  </table>
</body>
</html>

三、实现Datatable的myDatatable.js文件，然后引入到html代码中（上面我已经引入：myDatatable.js）

$(function(){
	/**
	 * DataTable属性配置以及生成datatable
	 */	
	    $('#myDatatable').DataTable({
	        "processing": true,//数据加载时显示进度条
	        "searching": true,//启用搜索功能
	        "serverSide": false,//启用本地分页（使用Ajax服务端进行分页需要设置未true）
	        "info":true, //分页信息提示等等
	        "paging":   true,//是否分页
	        "pagingType":   "full_numbers",//分页时会有首页，尾页，上一页和下一页四个按钮,加上数字按钮
	        "bLengthChange": true, //开关，是否显示每页显示多少条数据的下拉框
	        "aLengthMenu": [[2, 3, 5], [2, 3, 5]],//设置每页显示数据条数的下拉选项
	        'iDisplayLength': 2, //每页初始显示5条记录
	        "bSort": false, //是否可排序
	        //"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }],//进制某列排序
	       // "aaSorting": [[1, "asc"]],//指定某列按照什么规则排序
	        "oLanguage":{  //将datatable的英语信息转换未中文
	            "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": ": 以降序排列此列"
	            }
	        }
	    });
})

四、来一张效果图