dataTables 固定列不滚动

在工作中使用到了datatables这个强的插件,可以自动排序,全局搜索,分页。
遇到了一个问题就是列表滚动,需求就是前面一列不允许滚动(时间),分享一些使用的心得:
1,首先需要引入静态文件:

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/fixedcolumns/3.0.1/css/dataTables.fixedColumns.css" />
 <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script type="text/javascript" src="static/DataTables-1.10.15/DataTables-1.10.15/media/js/jquery.js"></script>
<script type="text/javascript" src="static/DataTables-1.10.15/DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="static/DataTables-1.10.15/DataTables-1.10.15/media/js/dataTables.fixedColumns.js"></script>

大家可以去官方下载,所有的主文件和扩展文件都有的,

2,然后配置:

$(document).ready(function() {
			$.extend( $.fn.dataTable.defaults, {
                searching: false,//禁止搜索
                //ordering:  false//禁止排序
            } );
			
			
				$("#myTable").DataTable({
					
					"scrollY" : function(){//这里是我自己要用到的功能,大家随便设定即可
						if(time == "week"){
							return "auto";
						}else{
							return "550";
						}
						
					},
					"scrollX": true,//x方向滚动
					"displayLength":"400",
					"paging": false,//禁止分页
					"autoWidth":true,
					//"scrollCollapse": true,
					fixedColumns : {//关键是这里了,需要第一列不滚动就设置1
	                    leftColumns : 1
	                },
					
				});
			 });
		
		});

配置以上就可以成功了。

微信公众号:CodeD
微信公众号

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页