DataTables 表格固定栏使用方法
有时候数据过多,为了用户体验,需要将重要的栏目固定不动,如下图所示:

从上图我们可以看出,表格滚动的时候,左边5栏是不动的。现在说一下实现方法:
插件地址:
使用方法:
wageTable为表格的ID。
var table = $('#wageTable').DataTable( {
scrollX: true,
scrollCollapse: true,
paging: false, //不用分页
info: false, //隐藏表格底部信息
ordering: false, //隐藏排序
searching: false, //隐藏搜索栏
fixedColumns: {
leftColumns: 5 //左侧要固定的栏目数,如果右侧需要固定可以用 rightColunms
},
language: {
sEmptyTable: "暂无数据", //没数据时的提示文字定义为中文,默认是”No data available in table“
}
});
更多左右2边固定例子可访问:https://datatables.net/extensions/fixedcolumns/examples/
参数具体的用法及含义可访问:https://datatables.net/reference/option/
更多dataTable英文信息替换成中文:
$('#wageTable').DataTable({
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
DataTables 表格固定栏使用方法的更多相关文章
- datatables定义列宽自适应方法
不同的分辨率以及浏览器自适应,列表不出现滚动条,表格内容自动换行. 方法:通过定义表格列属性,结合<table>CSS样式和定义的列单元格样式 'td_huanhang'/'td_unhu ...
- datatables表格
datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的 ...
- 前端常用功能记录(二)—datatables表格
并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添 ...
- 前端常用功能记录(二)—datatables表格(转)
前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是 ...
- JQuery中的DataTables表格插件
一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...
- Mvc 分页栏扩展方法
using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...
- JAVAEE——BOS物流项目09:业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入
1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...
- Android (争取做到)最全的底部导航栏实现方法
本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...
- PyQt4 里的表格部件的使用方法: QTableWidget
PyQt4 里的表格部件的使用方法: QTableWidget QT下QTableWidget使用方法小结 - - 博客频道 - CSDN.NET http://blog.csdn.net/jingz ...
随机推荐
- Python学习笔记——MySQL的基本操作(2)
1 运算符操作(配合查.修.删操作) 数据库的语法结构 查:select * from 表名 where 字段名 运算符 数字/字符; 改:update 表名 set 字段名=值,... wher ...
- oc 目录结构
最顶级的oc2是一个项目名,下级的oc2下面的文件是一些程序文件(.m或者.h的文件)和一些界面文件(.xib或者storyboard文件),supporting files文件下面的是资源文件,可以 ...
- Android 界面间传参数
登陆页 //声明Intent对象,并启动 LoginActivity Activity Intent intent = new Intent(); intent.setClass(LoginActiv ...
- view变化监听器ViewTreeObserver介绍
A view tree observer is used to register listeners that canbe notified of global changes in the vi ...
- Linux 关机 休眠, 关闭移动设备自动挂载 命令
"+++++++++++++++++++++++++ Linux 关机.休眠命令 +++++++++++++++++++++++++++++++++++++++"indows7关机 ...
- NRF24L01使用外部中断读取数据的问题
NRF24L01读取数据不能使用中断的方式,原因如下: 首先NRF24L01中断触发时,IRQ引脚会一直保持低电平直到状态寄存器中的中断标志被重新清零. stm32的外部中断触发方式只有上升沿或者下降 ...
- MIME类型释义--MIME类型大全--web.xml中有关<mime-mapping>配置说明
最早的HTTP协议中,并没有附加的数据类型信息,所有传送的数据都被客户程序解释为超文本标记语言HTML 文档,而为了支持多媒体数据类型,HTTP协议中就使用了附加在文档之前的MIME数据类型信息来标识 ...
- C# - 关于过期Token的解决方案
使用static来定义变量和过期时间 //===================== 初始化静态数据 ========================== #region ); //Access_To ...
- nginx服务器下 PHP 出现 502 解决方案(转)
nginx出现502有很多原因,但大部分原因可以归结为资源数量不够用,也就是说后端PHP-fpm处理有问题,nginx将正确的客户端请求发给了后端的php-fpm进程,但是因为php-fpm进程的问题 ...
- mac 安装android sdk
1.下载sdk http://www.androiddevtools.cn/ 2.解压下载文件到目标文件夹 tar -xzvf android-sdk_r24.4.1-macosx.zip /User ...