datatable-固定行固定列
时间:2019-10-11
本文章向大家介绍datatable-固定行固定列,主要包括datatable-固定行固定列使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前用fixed-table.js 写了一个固定行,固定列的效果,缺点是 无法随着屏幕自适应宽度,所以被产品pass掉了,还是继续看datatable的坑。
datatable这个是一个很强大的表格工具,之前只有英文文档,用于系统管理平台的开发有很大的用处,现在出了中文文档,更方便了。
现在记录一下实现步骤,方便以后继续研究。
实现的效果图,原理应该都是一样的 三个表格,实现固定行,固定列,不过datatable 是一套配置,自动生成的。
1.资源:
css:
<link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css" /> <link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css" /> <link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
js:
<script type="text/javascript" src="assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js"></script> <script type="text/javascript" src="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script> <script type="text/javascript" src="assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script> <script type="text/javascript" src="assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script> <script type="text/javascript" src="assets/global/plugins/datatables/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"></script>
实现:
html:
js
$('#sample_6').DataTable({ //文案展示 "language": { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "", // "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "", "sInfoFiltered": "", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" } }, //ajax 请求接口 "sAjaxSource": "json/data.json", // "sAjaxSource": "/join/GetListPage", //搜索按钮 "searching": false, // "serverSide": true, "fnServerData": function (sSource, aoData, fnCallback) { //这个是点击 搜索以后触发的事件 重新掉了一次请求 $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback }) }, "paging": false, // "paging": true, "lengthChange": false, "ordering": false, "iDisplayLength": 10, "info": true, "autoWidth": true, bStateSave: true, //横向滚动 sScrollX: "100%", //纵向高度 滚动 sScrollY:'300', sScrollXInner: "110%", bScrollCollapse: false, fixedColumns: { //固定列的配置项 leftColumns: -1,//-1第一列不固定,默认固定第一列 rightColumns: 2 //固定右边第一列 }, bDestory: true, bServerSide: true, "columns": [ //data :Guestguid 对应的 数据的字段名 { "data": "no", className: "text-center" }, {"data": "Guestguid", className: "text-center"}, { "data": "Type", className: "text-center", }, { "data": "Contactname", className: "text-center", }, { "data": "FullName", className: "text-center", }, { "data": "Gender", className: "text-center", }, { "data": "InvitationCompany", className: "text-center", }, { "data": "WorldTop", className: "text-center", }, { "data": "ChinaTop", className: "text-center", }, { "data": "Country", className: "text-center", }, { "data": "Industry", className: "text-center", }, { "data": "Hierarchy", className: "text-center", }, { "data": "Nationality", className: "text-center", }, { "data": "Company", className: "text-center", }, { "data": "Title", className: "text-center", }, { "data": "Phone", className: "text-center", }, { "sClass": "text-center", "data": "Institution", "render": function (data, type, full, meta) { return '<input type="checkbox" class="tablesingle" lay-ignore name="tablesingle" value="" />' }, "bSortable": false }, { "sClass": "text-center", "data": "Contacttel", "render": function (data, type, full, meta) { return '<input type="checkbox" class="tabledouble" lay-ignore name="tabledouble" value="" />' }, "bSortable": false }, ], });
json数据形式
这样就生成一个 不带分页的 自适应,固定列的表格了
原文地址:https://www.cnblogs.com/GoTing/p/11654552.html
- 我的WCF之旅(5):面向服务架构(SOA)和面向对象编程(OOP)的结合——如何实现Service Contract的重载(Overloading)
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[下篇]
- 谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持
- WCF技术剖析之二十九:换种不同的方式调用WCF服务[提供源代码下载]
- 我的WCF之旅(4):WCF中的序列化[下篇]
- [WCF权限控制]模拟(Impersonation)与委托(Delegation)[上篇]
- Android EclipseIDE技巧
- 什么是编译错误,运行时错误及逻辑错误?
- 我的WCF之旅(4):WCF中的序列化[上篇]
- WCF技术剖析之二十八:自己动手获取元数据[附源代码下载]
- 微信年度重磅“小游戏”上线,罗胖一度退出的小程序正在逆袭
- 谈谈WCF中的Data Contract(2):WCF Data Contract对Generic的支持
- Android注解学习(1)
- [WCF权限控制]ASP.NET Roles授权[上篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 正则replace 回调函数里接收的参数是什么?
- 微信小程序使用pako.js的踩坑笔记
- Koa - 初体验(写个接口)
- Koa - 中间件(理解中间件、实现一个验证token中间件)
- Koa - 使用koa-multer上传文件(上传限制、错误处理)
- 原生js 复制内容到剪切板
- Vue - watch高阶用法
- 小程序如何支持使用 async/await (构建npm版)
- require.context批量引入文件
- Node笔记 - process.cwd() 和 __dirname 的区别
- 小程序如何支持使用 async/await
- 小程序 - 如何自定义导航栏
- protobuf 语法 与 protocol-buffers 的使用
- 小程序 - 简单实现mixin功能
- 记录一些小技巧-CSS篇