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

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

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

二、html代码

 

      

          

              

              

                  ID
              
              

                  用户名
              
              

                  用户头像
              
              

                  联系电话
              
              

                  邮箱
              
              

                  创建时间
              
              

                  状态
              
              

                  操作
              
          
      
      
      

               

               		

               			
               		
               		
1
               		
小明
               		

               		
1311214545
               		
[email protected]
               		
2019/02/45 12:40:07
               		
有效
               		
doSomething
               
               

               		

               			
               		
               		
1
               		
小明
               		

               		
1311214545
               		
[email protected]
               		
2019/02/45 12:40:07
               		
有效
               		
doSomething
               
               

               		

               			
               		
               		
3
               		
小明
               		

               		
1311214545
               		
[email protected]
               		
2019/02/45 12:40:07
               		
有效
               		
doSomething
               
               

               		

               			
               		
               		
3
               		
小明
               		

               		
1311214545
               		
[email protected]
               		
2019/02/45 12:40:07
               		
有效
               		
doSomething
               
      
  

 三、实现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": ": 以降序排列此列"
	            }
	        }
	    });
})

四、来一张效果图