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 : {//关键是这里了，需要第一列不滚动就设置1leftColumns : 1},});});});

配置以上就可以成功了。

微信公众号：CodeD

dataTables 固定列不滚动相关推荐

jquery DataTables 固定列（fixedcolumns）不生效问题
首先我的表格是再iframe 中加载的,我的iframe通过js时时检测宽高,并给宽高赋值. 问题描述:我使用表格加载静态数据,没有ajax请求,当进页面的时候表格的滚动条一直在闪动,并且我的列固定失 ...
关于js表格固定列实现
一.概述在开发过程中前端列表展示数据对比查看的情况是比较常见的,我最近接到的一个任务就是要处理这样的数据:一般这种需求将某一列或几列进行横向固定然后其它不固定的列可以照常实现x轴的滚动: 话不多说先 ...
Vue中el-table追加行后固定列滚动错位问题
Vue中el-table追加行后固定列滚动错位问题一.问题描述偶然发现一个问题,但是并没有找到解决方案,自己调试了两个多小时终于解决. 先贴出问题业务描述:在已查询完全部的符合条件的数据后,表格 ...
Element - table固定列页面数据过多滚动时显示问题
背景:使用el-tabe设置右侧固定列 fixed="right",没有设置表格固定高,数据过多时滚动table会出现如下情况: 代码如下: <el-table :data= ...
html表格横向竖向滚动,利用纯css实现table固定列与表头中间横向滚动的思路和实例...
前言最近在做的后台管理系统要处理大量的表格,因为原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工 ...
css 固定列头,表格头部固定和表格列固定
我不是前端大神,只是偶尔在开发系统时,需要用到表格.如果表格只需要单独的用来展现数据,那就很简单了,那如果需要实现复杂的样式呢?比如说表头固定,当网页滚动的时候,表头自动固定到网页顶部,这样很客观的展 ...
php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 ) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间 ...
bootstrap-table固定表头固定列
bootstrap-table固定表头固定列 1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-tabl ...

dataTables 固定列不滚动

dataTables 固定列不滚动相关推荐

最新文章

热门文章