dataTables 固定列不滚动

逃离我推掉我的手 2022-06-13 00:55 320阅读 0赞

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

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

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  
![微信公众号][20200514112419921.jpg]

[20200514112419921.jpg]: /images/20220613/7309a63ec9474eb587c868bffd12104b.png