文档章节

固定表头和左侧列的表格插件DataTable

tianyawhl
 tianyawhl
发布于 2017/04/27 13:27
字数 296
阅读 323
收藏 0

由于表格比较长客户要求左侧的部分列要固定,以及头部固定,并有搜索排序功能,找了好久终于找到一个比较好的插件,DataTable,网站:https://datatables.net/download/index,由于我用的是bootstrap风格的,就下载同样风格的DataTable样式,主要有3个样式文件

<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
	<link rel="stylesheet" href="../../plugins/datatables/extensions/FixedColumns/css/fixedColumns.bootstrap.min.css">

以及几个js文件以及配置方法

 <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="../../bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script src="../../plugins/datatables/extensions/FixedColumns/js/dataTables.fixedColumns.min.js">
	</script>


 <script type="text/javascript">
	$(document).ready(function() {
		var table = $('#example').DataTable( {
			scrollY:        "500px",
			scrollX:        true,
			scrollCollapse: true,
			paging:         false,
			info: false,
			oLanguage : {
					 "sSearch": "搜索:",
					},
			fixedColumns: {
			leftColumns: 2,
		}
		} );
	} );
    </script>

在DataTable中显示的信息默认为英文,汉化方法

$(document).ready(function() {
		$('#listtable').dataTable({
			"sPaginationType" : "full_numbers",
			"oLanguage" : {
				"sLengthMenu": "每页显示 _MENU_ 条记录",
				"sZeroRecords": "抱歉, 没有找到",
				"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
				"sInfoEmpty": "没有数据",
				"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
				"sZeroRecords": "没有检索到数据",
				 "sSearch": "名称:",
				"oPaginate": {
				"sFirst": "首页",
				"sPrevious": "前一页",
				"sNext": "后一页",
				"sLast": "尾页"
				}
					
			}
		}
		);
	});

 

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 1
博文 201
码字总数 99132
作品 0
常州
前端工程师
HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这...

李玉珏
2015/04/23
0
0
Xceed WinForm数据表格控件Xceed Grid For .NET详细介绍

Xceed Grid For .NET是一款高级的,多功能的、扩展性极强的数据表格控件,具有分组、主从表、多种主题外观、固定列和行、Excel导出、支持Vista风格,交互的外观样式,内嵌报表功能,支持导出...

netkongjian
2014/06/06
0
0
PoppinRubo/jquery.dataTable

jquery.dataTable jquery 数据表格 配置项 说明 选项 debug 是否开启调试模式,默认关闭 可选,bool类型,false-true method 发送数据请求的方式,默认使用GET方式请求 可选,string类型,get...

PoppinRubo
2017/11/16
0
0
jQuery.bsgrid 1.32 发布,更多简单实用功能及扩展

jQuery.bsgrid 简单易用的jQuery Grid插件 jquery bsgrid,A simple jQuery Grid plugin with pagation, export and easy to expand. 一个简单易用的jQuery Grid插件,内置提供多套皮肤且非常......

bs2004
2015/01/23
3.6K
18
QT 创建鼠标右键菜单

QWidget及其子类都可有右键菜单,因为QWidget有以下两个与右键菜单有关的函数: Qt::ContextMenuPolicy contextMenuPolicy () const void setContextMenuPolicy ( Qt::ContextMenuPolicy pol...

晨曦之光
2012/04/13
10.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
今天
4
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
1
0
docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
今天
4
1
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
今天
3
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部