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

从上图我们可以看出,表格滚动的时候,左边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. SQL Server 2005/2008遍历所有表更新统计信息

    DECLARE UpdateStatisticsTables CURSOR READ_ONLY FOR 02   SELECT sst.name, 03          Schema_name(ss ...

  2. jquery ajax调用WCF,采用System.ServiceModel.WSHttpBinding协议

    采用System.ServiceModel.WSHttpBinding或者basicHttpBinding 协议.客户端就不能直接在前端通过url直接访问服务了 它是基于SOAP协议的bing,会采用 ...

  3. POSIX 共享内存和 系列函数

    在前面介绍了system v 共享内存的相关知识,现在来稍微看看posix 共享内存 和系列函数. 共享内存简单来说就是一块真正的物理内存区域,可以使用一些函数将这块区域映射到进程的地址空间进行读写, ...

  4. TCP客户/服务器简单Socket程序

    建立一个 TCP 连接时会发生下述情形: 1. 服务器必须准备好接受外来的连接.这通常通过调用 socket.bind 和 listen 这三个函数来完成,我们称之为被动打开. 2. 客户通过调用 c ...

  5. iOS开发打包

    ios11个论坛地址   邓白氏编码    邓白氏申请 http://blog.fir.im/faq/ AdHoc,InHouse,App Store Account Type: InHouse  ( ...

  6. js判断字符是否为空的方法

    js判断字符是否为空的方法: //判断字符是否为空的方法 function isEmpty(obj){ if(typeof obj == "undefined" || obj == ...

  7. Spring Cloud构建微服务架构(三)断路器

    在分布式架构中,断路器模式的作用也是类似的,当某个服务单元发生故障(类似用电器发生短路)之后,通过断路器的故障监控(类似熔断保险丝),向调用方返回一个错误响应,而不是长时间的等待.这样就不会使得线程因 ...

  8. 深度学习FPGA实现基础知识10(Deep Learning(深度学习)卷积神经网络(Convolutional Neural Network,CNN))

    需求说明:深度学习FPGA实现知识储备 来自:http://blog.csdn.net/stdcoutzyx/article/details/41596663 说明:图文并茂,言简意赅. 自今年七月份 ...

  9. [sh]shell小结

    一 判断 -d 测试是否为目录.-f 判断是否为文件. -s 判断文件是否为空 如果不为空 则返回0,否则返回1 -e 测试文件或目录是否存在. -r 测试当前用户是否有权限读取. -w 测试当前用户 ...

  10. python(34):为什么在Python里推荐使用多进程而不是多线程?

    最近在看Python的多线程,经常我们会听到老手说:“Python下多线程是鸡肋,推荐使用多进程!”,但是为什么这么说呢?                  要知其然,更要知其所以然.所以有了下面的深 ...