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

从上图我们可以看出,表格滚动的时候,左边5栏是不动的。现在说一下实现方法:

插件地址:

https://datatables.net/

使用方法:

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 表格固定栏使用方法的更多相关文章

  1. datatables定义列宽自适应方法

    不同的分辨率以及浏览器自适应,列表不出现滚动条,表格内容自动换行. 方法:通过定义表格列属性,结合<table>CSS样式和定义的列单元格样式 'td_huanhang'/'td_unhu ...

  2. datatables表格

    datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的 ...

  3. 前端常用功能记录(二)—datatables表格

    并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添 ...

  4. 前端常用功能记录(二)—datatables表格(转)

    前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是 ...

  5. JQuery中的DataTables表格插件

    一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...

  6. Mvc 分页栏扩展方法

    using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...

  7. JAVAEE——BOS物流项目09:业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入

    1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...

  8. Android (争取做到)最全的底部导航栏实现方法

    本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...

  9. PyQt4 里的表格部件的使用方法: QTableWidget

    PyQt4 里的表格部件的使用方法: QTableWidget QT下QTableWidget使用方法小结 - - 博客频道 - CSDN.NET http://blog.csdn.net/jingz ...

随机推荐

  1. python学习笔记——多进程中的锁Lock

    1 进程锁 python编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性. 每个对象都对应于一个可称为“互斥锁”的标记,这个标记用来保证在任一时刻,只能有一线程访问对象. 在python中我 ...

  2. 《JAVA与模式》之适配器模式(转载)

    适配器模式比较简单,偷个懒,直接转载一篇. 个人理解: * 类适配器是通过继承来完成适配 * 对象适配器是通过传递对象来完成适配 * 不管哪种,其实都是通过引用特殊接口的对象来完成特殊接口的适配调用 ...

  3. 转 虫师的selenium借助AutoIt识别上传(下载)详解

    selenium借助AutoIt识别上传(下载)详解 2014-12-27 11:26 by 虫师, 755 阅读, 1 评论, 收藏,  编辑 AutoIt目前最新是v3版本,这是一个使用类似BAS ...

  4. 西邮Linux兴趣小组纳新笔试试题

    下面是西邮Linux小组今年纳新的笔试试题 1. 下面这个程序的输出结果是什么? int main() { int a = (1, 2); printf(“a = %d\n”, a); return ...

  5. 关于apache服务器加载so的报错

    早上突然发现我的虚拟机上的WEB应用访问不了了,后台检查httpd服务,无法启动,出现一行提示: ①starting httpd: httpd: Syntax error on line 163 of ...

  6. Qt中使用DOM解析XML文件或者字符串(实例)

    因为需要读取配置文件,我的配置文件采用xml:因此编写了使用qt读取xml文件内容的代码,xml文件如下: <?xml version="1.0" encoding=&quo ...

  7. 苹果开发小记(一):NSString 的比较用法

    转自:http://blog.sina.com.cn/s/blog_897dd7be0100teh6.html 做了几个月的苹果,很多的思想方法都可以遵循一定规律来做的.NSString 比较字符串, ...

  8. Cocos2d-x 3.0final 终结者系列教程03-源代码文件夹说明

    话说今天从霍营到回龙观,走到天鑫家园东路.我肋哥去,堵死我啦.7:30出门,9:10还没到回龙观. 北京这交通真是坑爹.回过头想想.怪自己走小路,有时候确实快.可有时候真堵. 堵了35分钟后果断掉头, ...

  9. CDN技术详解笔记

    1.影响网络传输的四个因素(1)“第一公里”:网站服务器接入互联网的链路所能提供的带宽.(2)“最后一公里”:用户接入带宽.(3)对等互联关口:不同网络之间的互联互通带宽.(4)长途骨干传输:首先是长 ...

  10. mysql:索引原理与慢查询优化

    一 索引的原理 1. 索引原理 索引的目的在于提高查询效率,与我们查阅图书所用的目录是一个道理:先定位到章,然后定位到该章下的一个小节,然后找到页数.相似的例子还有:查字典,查火车车次,飞机航班等 本 ...