datatable 使用 方法 用法

1.首先引入相关的js文件

   	<script src="<%=root %>/js/jquery.dataTables.js" ></script>
    <script src="<%=root %>/js/jquery.dataTables.min.js" ></script>

2.  书写要放入表格的 html

<div id="chainInfoListTabDiv">
					<table class="table table-striped table-bordered table-hover"
							cellpadding="0" cellspacing="0" border="0" id="chainInfoListTab" style="width:100%;">
						<thead>
							<tr>
								<th style="width:100px;">皮肤名称</th>
								<th style="width:100px;">皮肤下载量</th>
								<th style="width:100px;">皮肤强推日期</th>
								<th style="width:100px;">皮肤结束日期</th>
								<th style="width:200px;">操作</th>
							</tr>
						</thead>
					</table>
					</div>

3.

<script type="text/javascript">
    $(function (){
			initData();//初始化执行initdata()方法  用来获取table的值  即 后台传过来的值
			
		});
    
var initData=function (){
			
			$("#chainInfoListTab").dataTable({
				 "oLanguage": {
		                "sLengthMenu": "每页显示 _MENU_条",
		                "sProcessing": "正在载入........",
		                "sZeroRecords": "没有找到符合条件的数据",
		                "sProcessing": "<img src=’./loading.gif’ />",
		                "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
		                "sInfoEmpty": "没有记录",
		                "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
		                "sSearch": "搜索：",
		                "oPaginate": {
		                    "sFirst": "首页",
		                    "sPrevious": "前一页",
		                    "sNext": "后一页",
		                    "sLast": "尾页"
		                }
		            },
		            destroy: true,
		            "bPaginate": true, //翻页功能
		            "bLengthChange": false, //改变每页显示数据数量  
		            "bFilter": false, //过滤功能  
		            "bSort": false, //排序功能  
		            "bInfo": true,//页脚信息  
		            "bScrollCollapse" : false,
		            
		            /*默认排序设置*/
		            "aaSorting": [[1, "desc"]],//设置第1个元素为默认排序  
		            /*默认翻页样式设置*/
		            "sPaginationType": "full_numbers",
		            /*是否开启主题*/
		            "bJQueryUI": true,
		            "sAjaxSource": "<%=root%>/happinessMovie/queryAllSkinInfo",
		            "bServerSide": true,//指定从服务器端获取数据
    		    columns: [
    	         {
     	            data: function (e) {
           // 后台返回的各个字段的值 判断 一一写入 如果不判断 后台该字段的值为null 会报错
     	            	 if(e.skinName==null||e.skinName==""){
     	            		 return "---";
     	            	 }
     	            	 return "<span class='badge badge-primary' title='"+e.skinName+"'>"+e.skinName+"</span>";
     	            	
     	            }
     	        }, {
     	        	data:function(e){
     	        	    
     	        		return e.skinCount;
     	        	}
     	        },{
     	            data: function (e) {
     	            	if(e.skinPushTime==null||e.skinPushTime==""){
    	            		 return "---";
    	            	 }
     	                return "<span class='badge badge-primary' title='"+e.skinPushTime+"'>"+e.skinPushTime+"</span>";

     	            }
     	        },{
     	            data: function (e) {
     	            	if(e.skinEndTime==null||e.skinEndTime==""){
   	            		 return "---";
   	            	 }
     	                return "<span class='badge badge-primary' title='"+e.skinEndTime+"'>"+e.skinEndTime+"</span>";

     	            }
     	        },{
     	            data: function (e) {
     	            	var html="";
     	            																																							 					
     	            		html +="<button class='btn btn-info' style='margin-left: 20px;' id='editBtn' type='button' data-toggle='modal' data-target='#ChainInfoModal' tabindex='-1' onclick='getChainInfoById(\""+e.id+"\",\""+e.skinName+"\",\""+e.skinBackImg+"\",\""+e.skinCoverImg+"\",\""+e.skinUrl+"\",\""+e.skinCount+"\",\""+e.skinPushTime+"\",\""+e.skinEndTime+"\")'>";
    	            		html +="<i class='glyphicon glyphicon-pencil'></i>编辑</button>";
     	            	    html +="<button class='btn btn-info btn-danger' id='deleteAppnewsBUT' style='margin-left: 20px;' type='button' onclick='delMercEnterInfo(\""+e.id+"\")' >";
         	            	html +="<i class='glyphicon glyphicon-remove-circle'></i>删除</button>";
     	            	
     	            	 return html;	
     	            	
     	            }
     	        }
    	    ],
    	    "fnServerParams": function (aoData) {
    	        aoData.push(
//                 根据该值查询
    	            { "name": "skinName", "value": $("#skin_name").val().replace(/^ +| +$/g,'') }
    	            
    	            );
    	    },
		            //请求数据
		    "fnServerData": function (sSource, aoData, fnCallback) {
		                $.ajax({
		                    "type": 'post',
		                    "url": sSource,
		                    "dataType": "json",
		                    "data": {
		                        aoData: JSON.stringify(aoData)
		                    },
		                    "success": function (resp) {
		                        fnCallback(resp);
		                    }
		                });
		            }
    		});
			
		};

</script>