文档章节

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

tianyawhl
 tianyawhl
发布于 2017/04/27 13:27
字数 296
阅读 306
收藏 0
点赞 0
评论 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
博文 192
码字总数 88621
作品 0
常州
前端工程师
HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

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

李玉珏 ⋅ 2015/04/23 ⋅ 0

Xceed WinForm数据表格控件Xceed Grid For .NET详细介绍

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

netkongjian ⋅ 2014/06/06 ⋅ 0

PoppinRubo/jquery.dataTable

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

PoppinRubo ⋅ 2017/11/16 ⋅ 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 ⋅ 18

在QT中添加右键菜单

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

mjrao ⋅ 2012/07/05 ⋅ 0

18个最好的 jQuery 表格插件

我们一般使用HTML表格来显示数据,我们都知道div更容易设计,更灵活。但是现在你使用这些精彩的jQuery表格插件,将更简单、灵活、更多风格。 本篇文章介绍了18个非常不错的jQuery 表格插件,...

老枪 ⋅ 2011/04/06 ⋅ 7

QT 创建鼠标右键菜单

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

晨曦之光 ⋅ 2012/04/13 ⋅ 3

禅道项目管理软件专业版 4.3.stable 版本发布

大家好,禅道项目管理软件专业版4.3.stable版本发布! 该版本主要完善数据表格和水晶报表,继续优化版本库和代码评审。 一、专业版功能 1、集成禅道开源版6.3功能,可点击查看:http://www....

炒蚕豆吃蹦豆 ⋅ 2014/12/03 ⋅ 0

jQuery表格插件--MagicGrid

MagicGrid 是一个 jQuery 的表格插件,易于使用,易于扩展,虽然只提供有限的功能,但良好的设计使之非常容易扩展,只需少量代码就可实现多项功能 多行表头(multi headers),行展开(expandab...

匿名 ⋅ 2011/08/12 ⋅ 0

datatables 参数详解(转)

//@translator codepiano//@blog codepiano//@email codepiano.li@gmail.com//尝试着翻译了一下,难免有错误的地方,欢迎发邮件告知,多谢。/--------------------------------------------...

Airship ⋅ 2016/09/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 20分钟前 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部