dataTables 固定列不滚动

来源:互联网 发布:中信建投证券待遇 知乎 编辑:程序博客网 时间:2024/06/11 04:00

在工作中使用到了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                    },                });             });        });

配置以上就可以成功了。

原创粉丝点击