DataTables插件-高度自适应

最新推荐文章于 2021-04-30 16:39:30 发布
最新推荐文章于 2021-04-30 16:39:30 发布
阅读量4.6k 收藏 1
点赞数 1
分类专栏： DataTables JavaScript Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ALaDingPro/article/details/83898776
版权
JavaScript 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
DataTables
3 篇文章 0 订阅
订阅专栏
Jquery
3 篇文章 0 订阅
订阅专栏

应用

不同显示器的分辨率不一样，导致显示效果不一致。很多情况下，在该分辨率下显示适合，在其它显示器显示过大或过小。如何调至更好的用户体验？这是一门比较耗时的功课。本篇文章应用范围很窄，只讲DataTable插件的高度自适应。在不同的分辨率下，尽可能地将表单数据更好的显示出来。

实现

利用css3的新单位：vh

'sScrollY': 'calc(100vh - 280px)'

其中，100vh代表视窗高度的100%，280px则根据页面自定义。需要注意的是减号 “-”  两端需要空格。

效果

不爱运动的Pluto
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于datatables自适应以及自定义列宽度的总结
weixin_30922589的博客
05-03 6335
table-layout:fixed;可以自定义列的宽度 <div id="bizhi" style="width:100%;height: 85%;overflow-x: auto;"> <table id="data_table" class="" style="width:100%;height: 100%;ta...
datatables固定头与滚动条适配文件
12-28
2. 初始化`DataTables`实例时，启用`scrollY`选项来开启滚动功能，并可能需要设置合适的高度，如`scrollY: '300px'`。 3. 同时，初始化`FixedHeader`插件，通常是在`DataTables`初始化之后，例如：`$.fn.dataTable....
微信小程序tab栏切换高度自适应-代码模板（直接复制即可）
Ark方舟
10-10 1493
效果图 wxml文件代码： <!--pages/index/index.wxml--> <view class="mun"> <span class="{{munStyle[0]}}" bindtap="clickMun" data-num="1">全部酒席</span> <span class="{{munStyle[1]}}" bindtap="clickMun" data-num="2">待办酒席</span.
jQuery插件DataTable使用方法详解(.Net平台)
11-27
上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件——DataTable（简称DT），很好用。 DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。 一.使用DT，需要以下支持 js:jq+jquery.dataTables.min.js  二、页面上进行引入js，直接使用DT功能 前端代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport
datatables插件让其组件自定义排列，适应各种页面布局
weixin_30608131的博客
03-13 179
如何自定义布局，让分页组件，页码筛选长度的下拉框，以及表格信息位置自定义 这个依赖的是sDom属性，这个有点不容易懂，它有自己的一个编码方式，最后会转换成html代码。 未做任何修改时，datatables插件默认显示方式为 但是项目中经常会遇到各种各样的布局，所以需要sDom属性来设置页面，修改各组件的显示位置。可参考：http://www.datatables.club/r...
datatables 当显示更少的记录时，是否允许表格减少高度
peppa_pig的博客
08-27 236
对于表格的高度，一些人希望随着数据的变化而变化， 另一些人则希望固定高度，这个参数正是这个用处,表示和表格数据同步，表格数据减少时，表格的高度也跟着减少 scrollCollapse: true
Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
菜菜的博客
01-18 2510
在做管理后台功能时，经常需要用到表格展示数据，从数据库查询返回的数据，返回集合或数组到前台，然后前台将数据渲染成表格，方便直观展示数据，通常还需要结合分页、查询、排序。Datatables是一款符合上面所有需求的表格插件，基于jquery，方便我们对表格进行交互操作 Datatables中文网链接 这是一个读取本地json数据渲染表格的示例 ...
jQuery表格插件datatables用法详解
11-26
DataTables是一个强大的jQuery插件，专为HTML表格设计，它提供了一套全面的交互式控制，包括分页、过滤、排序、自适应宽度、自定义样式、隐藏列等功能。该插件以易用性和灵活性著称，不仅支持动态创建表格，还具有...
再次分享18个非常棒的jQuery表格插件
12-10
1. DataTables：DataTables是一个功能丰富的表格增强插件，提供了搜索、排序、分页和自定义列显示等特性。它的在线例子展示了如何通过API控制表格的行为，以及如何自定义样式和功能。 2. tablesorter：tablesorter...
jquery响应插件
09-25
jQuery响应式插件是基于jQuery库的扩展，用于帮助开发者实现网页元素在不同屏幕尺寸下的自适应布局。它们通常包含了对媒体查询、窗口大小变化事件监听、动态计算布局等功能，使得网页能够根据用户的设备和视口大小...
INSPINIA - Responsive Admin Theme2.5
11-21
3. **jQuery插件集成**：该主题集成了许多流行的jQuery插件，如jQuery UI、DataTables、Chart.js等，用于图表、表单验证、日期选择器等功能，极大地增强了后台管理界面的交互性。 4. **AngularJS支持**：对于那些...
dataTable 参数详解
weixin_34296641的博客
08-07 284
//@translatorcodepiano //@blogcodepiano //@emailcodepiano.li@gmail.com //尝试着翻译了一下，难免有错误的地方，欢迎发邮件告知，多谢。 /*------------------------------------------------Feature-------------------------...
dataTable的一些参数
mm_hello11的博客
10-05 456
$('#table_id').DataTable({ 'dom': '&lt;'top'iflp&lt;'clear'&gt;&gt;rt&lt;'bottom'iflp&lt;'clear'&gt;&gt;', //在表格上面和下面同时显示长度菜单，分页菜单和搜索框 'bProcessing' : true, //DataTables载入数据时，是否显示‘进度’提示 'bServerSide' ...
Datatable使用问题01 - 响应式表格由PC到移动
Who__am_i的博客
12-03 920
在使用bootstrap开发前端页面时，使用Datatable.js渲染表格部分，但默认状态下的Datatable的表格在自适应时存在屏幕分辨率缩小到小于表格内容后表格内容便会开始换行，如下图1 在数据与列较多的情况下，自适应到小分辨率会出现内容堆积中一起的现象，影响阅读表格内容。 图1 自适应PC的小窗口 为了使表格的内容不再换行，有两种方法可以实现，但两种方法都有一些缺点，以下为详细说明 一...
DataTable_配置参数
qq_30607437的博客
06-24 1344
$('#dataTable_ID1').dataTable({ //"aaSorting" : [[1, "asc"]], //默认的排序方式，第1+1列，升序排列 "aLengthMenu" : [5, 10, 25, 50, 100], //更改显示记录数选项(默认：[10,25,50,100]) "bAutoWidth" : false, // 禁用自适应宽度(默认：true) //"bDeferRender":false,//推迟创建表元素每个元素,直到它们都创建完.
DataTables:问题及解决
问道于旁
11-26 386
解决Cannot reinitialise DataTable问题 解决dataTables再次调用不能清空数据 destroy : true, 或retrieve: true, 或在加载datatable之前,销毁$("#test").dataTable().fnDestroy(); 参考资料： https://www.cnblogs.com/yang-xiansen/p/101...
JQuery DataTable 使用教程
08-10 4822
Datatables官方网站Datatables简介DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点： 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的如何使用在做
Datatable 设置那点事
qq_24140481的博客
04-30 856
1. 表格每页行数及是否翻页 pagingType: "full", paging : true, pageLength:3, 根据页面情况，按需设置。虽然一般情况是使用翻页功能的，但也确实会遇到数据不使用翻页,而是采用固定表格高度，滚动下滑查看数据的情况。 2. 表格高度 scrollY : "155px" 这个可以不设置的，只设置每页显示几行就可以。但是显示的时候尴尬的事情就是当最后一页不能填满表格的时候，数据下方的info和翻页部分都会紧跟随最后一行数据，导致表格变小，看起来并不美观。 3. 是否
datatables.net-vue3在vue3的用法
最新发布
03-28
DataTables.net-Vue3是一个用于在Vue3中使用DataTables.net插件的库。它提供了一种简单的方式来集成和使用DataTables.net插件，以便在Vue3应用程序中展示和操作数据表格。 使用DataTables.net-Vue3，你可以通过以下步骤在Vue3中使用DataTables.net插件： 1. 安装DataTables.net-Vue3库： 你可以使用npm或yarn来安装DataTables.net-Vue3库。在终端中运行以下命令： ``` npm install datatables.net-vue3 ``` 或 ``` yarn add datatables.net-vue3 ``` 2. 导入和注册DataTables.net-Vue3组件： 在你的Vue组件中，导入DataTables.net-Vue3组件并将其注册为局部组件。例如： ```javascript import { DataTables } from 'datatables.net-vue3'; export default { components: { DataTables, }, // ... } ``` 3. 在模板中使用DataTables组件： 在你的Vue组件的模板中，使用DataTables组件来展示数据表格。你可以通过传递props来配置表格的选项和数据。例如： ```html <template> <div> <data-tables :options="tableOptions" :data="tableData"></data-tables> </div> </template> <script> import { DataTables } from 'datatables.net-vue3'; export default { components: { DataTables, }, data() { return { tableOptions: { // 配置表格选项 }, tableData: [ // 表格数据 ], }; }, // ... } </script> ``` 以上是使用DataTables.net-Vue3在Vue3中的基本用法。你可以根据具体需求配置表格选项和数据，以满足你的应用程序的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值