首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Jquery datatable停止父行的大小扩展

JQuery DataTable是一个功能强大的JavaScript表格插件,可以用于在网页中展示和操作数据。当使用JQuery DataTable时,有时候我们希望停止父行的大小扩展,即禁止父行的展开和收缩功能。

要停止父行的大小扩展,可以通过设置JQuery DataTable的配置参数来实现。具体步骤如下:

  1. 在HTML页面中引入JQuery和JQuery DataTable的相关文件:
代码语言:txt
复制
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
  1. 创建一个HTML表格,并将其转换为JQuery DataTable:
代码语言:txt
复制
<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>
  1. 使用JQuery DataTable初始化表格,并设置相关配置参数:
代码语言:txt
复制
$(document).ready(function() {
  $('#myTable').DataTable({
    "paging": false, // 禁用分页功能
    "ordering": false, // 禁用排序功能
    "info": false, // 禁用信息提示功能
    "searching": false, // 禁用搜索功能
    "scrollY": "200px", // 设置表格的垂直滚动高度
    "scrollCollapse": true, // 当表格数据不足时,垂直滚动条自动隐藏
    "scrollX": true, // 启用水平滚动条,当表格数据过多时可以横向滚动
    "bSortClasses": false, // 禁用排序时添加的CSS类
    "columnDefs": [
      { "orderable": false, "targets": "_all" } // 禁用所有列的排序功能
    ]
  });
});

通过以上配置,我们可以实现停止父行的大小扩展。具体来说,设置了"paging": false禁用了分页功能,"ordering": false禁用了排序功能,"info": false禁用了信息提示功能,"searching": false禁用了搜索功能。另外,通过设置"scrollY"和"scrollCollapse"可以控制表格的垂直滚动,"scrollX"可以启用水平滚动条。最后,通过"columnDefs"中的配置可以禁用所有列的排序功能。

腾讯云提供了云计算相关的产品和服务,其中包括云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云的产品和服务信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

UI标签库的话题:JEECG智能开发平台 BaseTag(样式表和JS标签引入)

JS插件类型 插件名 描写叙述 Jquery 引入版本号jquery-1.8.3 Easyui 引入版本号jquery.easyui.1.3.1及自己定义扩展JS DatePicker 引入版本号My97DatePicker4.8...Beta2 Jqueryui 引入版本号jquery-ui-1.9.2 prohibit 经常使用浏览器操作JS函数如禁用右键菜单,禁用回退。...以适应容器 否 true sortName string 定义列进行排序 否 null sortOrder string 定义列排序顺序,仅仅能是“递增“或“降序(asc,desc) 否 asc...fitColumns boolean 当为true时,自己主动展开/合同列大小。...无 又一次载入数据name是表格唯一标示 get+name+Selected field 获取选定传入字段值 getSelected field 获取选定传入字段值 get+name+Selections

4.4K20

Salesforce LWC学习(十八) datatable展示 image

当然,某些情况标准搞定不了情况下,我们便需要使用自定义开发。自定义开发我们就可以使用 lightning-datatable组件。...展示和格式化焗油适当类型列 具有无限滚动功能 指定数据类型允许 inline编辑 可以定义headeraction 可以定义行级别的action 重置每一列展示大小 选择操作 指定列通过升序或者降序排列...lightning-datatable提供方法,用来获取哪些用户选中。...二. datatable中展示表中字段值 上个demo中简单介绍了datatable使用,数据全是写死demo,接下来通过一个包含后台逻辑进行datatable展示数据。...总结:篇中讲了datatable简单应用以及相应扩展datatable很强悍,这里不逐点讲述,感兴趣可以自行查看 inline edit,action等操作。

1.5K20

Datatables表格插件,你用过吗?

Datatables是一款jquery表格插件。它是一个高度灵活工具,可以将任何HTML表格添加高级交互功能。...各式各样扩展: Editor, TableTools, FixedColumns …… 丰富多样option和强大API 支持国际化 超过2900+个单元测试 免费开源 ( MIT license...在ajax请求中利用data属性动态实时获取用户输入数据,并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求,这时请求参数就添加了需要字段和值; <form...dataIndex当前行数据索引 createdRow:function (row, data, dataIndex) { //最后一列 var let const...可以在模型中定义一个字段(我这里叫action)只要和你colums:[{data:'action'}]对应就可以。使用laravel模型属性和方法去实现。 <?

5.9K30

datatables应用程序接口API

后者返回jQuery实例(如果是这个方式初始化Datatables,那么返回对象不能使用api方法,不然会报方法未定义) 核心(Core) 名称 说明 ajax.reload()API 重新加载数据源获取数据...(完成)一个 jQuery 选择器操作 ajax.json()API 获得最终json数据 ajax.params()API 获取最后一次Ajax请求提交参数 ajaxAPI ajax方法命名空间...API 对象 tables().body()DT 得到表格 tbody节点,如果是一次性初始化多个表格,使用类选择器,或者table标签选择初始化,使用下列方法,table()针对单个table,tables...转为jQuery实例 unique()DT 去重 unshift()DT 在结果集里从头添加一个或多个项目,返回长度 静态方法(Static) 名称 说明 $.fn.dataTable.isDataTable...()API 使用正则表达式转义特殊字符 $.fn.dataTable.util.throttle()API 减少方法调用频率 $.fn.dataTable.versionCheck()API 版本号兼容性检查

4.4K30

【8】数据浏览表格快速输出

表头 对表格输出封装 生成表格实例 功能扩展 在页面数据和控件自动交换机制中,我们通过PageX实现了一种快速控件和数据交换机制,能够方便快捷地完成数据库中数据记录管理。...在实际应用中,配合JQuery、CSS样式表和Ajax,可以发挥强大威力,达到“无所不能”境界。 表格还是列表? 输出数据库中数据列表,实际上就是以格式化方法,把一个多行多列数据展示出来。...高度、各列宽度、对齐等都需要控制管理,特定条件下,还可能遇到错情况。 下面,我们不妨按照上述构造思路构造一个数据列表,使用范例数据库中book表数据如下: ?...功能扩展 上述代码功能已经比较全面了,但仍然可能遇到各种各样特别的需求,单独对生成函数进行修改增加复杂度,因此往往采用对调用函数附加处理来实现。...4、前端代码需要ID列,但不要显示 可以通过JS代码或者JQuery代码隐藏第一列。 5、新增控制列 可以通过前端代码,对或者表格单击事件进行处理,提取该行ID,并转换为相应控制链接。

2.5K50

jquery dataTable 学习之初始化插件(一)

最近用到了一个比较实用jquery插件--jquery dataTable,这是一个高度灵活工具,依据基础逐步增强,这将增加先进互动控制,支持任何HTML表格。...主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费 一 、简单初始化使用...首先是html部分代码,需要先构建一个htmltable表格 列1 列2.../td> 数据6 数据7 数据8 然后是在js中初始化表格控件(前提是引入dataTable...js文件) $(document).ready(function() { $('#example').dataTable(); } ); 这样,一个基本表格框架就一个构建好了。

1.1K10

基于RequireJS和JQuery模块化编程——常见问题解析

由于js代码逻辑越来越重,一个js文件可能会有上千,十分不利于开发与维护。...不过即便是有完整官方文档,仍然遇到不少问题,比如jquery-ui使用。 下面就循序渐进讲解一下我遇到问题,以及解决办法。...关于循环依赖源码可以参考云盘 如何在requirejs中使用jquery 如果想要使用jquery比较简单,直接在main.js中添加对应依赖即可: requirejs.config({ baseUrl...可以修改它匿名函数,传入$对象,在最后一: */ return $.fn.dataTable; //}));原来是这样 }($)));//这里增加执行这个匿名函数,并且传入$对象...这就导致我最开始绑定事件都失效了....只有推迟到这个js重构完页面,再绑定才

2.9K100

DjangoWeb使用Datatable进行后端分页实现

使用场景:不使用Django模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。...根据官网描述DataTables真正威力可以通过使用它提供API来利用。 关于table2使用,以后会说明!!!...) ) 注意,我这里datatable分页使用是post请求, 因为分页时候需要向服务端传递很多参数,使用get请求的话,这里就很难受了。...这个方法是将你数据跟据你页码,页面大小,分好页 def page(deploy_list ,limit,offset):#查询分页,调用此方法需要传获取数据列表,页面大小,页码 # 取出该表所有数据...以上这篇DjangoWeb使用Datatable进行后端分页实现就是小编分享给大家全部内容了,希望能给大家一个参考。

4.9K20

表格头部固定和表格列固定

表头固定和列固定,需要用到jQuery DataTables(我不是前端大神,就懒一点,用下框架,偶尔用下框架,开发时间也节省了嘛,嘿嘿 ^_^),没错,又是我前面介绍DataTables,我对这框架是情有独钟啊...表头固定和列固定是jQuery DataTables里两个独立扩展插件,下面我们就分别说说: 表头固定 1.下载并引入js和css样式扩展 dataTables.fixedHeader.min.js...fixedHeader.dataTables.min.css 2.javascript $(document).ready(function() { $('#example').DataTable...fixedColumns.dataTables.min.css 2.javascript $(document).ready(function() { var table = $('#example').DataTable...但是有一点要记住,引入这些扩展之前,比如先引入DataTables框架哦!!!

3.3K20

dataTable参数说明

例如: $('#example').dataTable( { "ajax": { "url": url, "type": "POST" } } ); JQuery...Number /Array false destroy 设为ture时通知dataTable函数完全重新建立一个新控件实例,在一个页面内反复对同一个控件加载dataTable函数并且想重新建立控件时使用...Boolean false displayStart 列表初始显示索引,根据给出索引会自动翻页,比如一个每页10个列表,那么给出20可以让其翻到第二页 Number...{ "search": "^[0-9]", "escapeRegex": false } ] Array 无 stripeClasses 定义一个字符串数组,在显示时候依次使用里面的字符串作为...仅仅能在控件初始化时候对控件进行控制和影响,如果要在控件使用过程中对它进行控制和变化,就需要用到DataTables函数库(API).

4.5K20

【自然框架】n级下拉列表框原理

首先要设置记录集,这里用DataSet来装载,二级联动,里面就要有两个DataTable;三级联动,里面就要有三个DataTable。同理,n级联动就要有n个DataTable。   ...然后用第一个DataTable来绑定第一个DropDownList。第一个DropDownList是固定生成,其他DropDownList则是根据级数动态new出来。   ...str_HTML[2 * i + 1]));                     lst.DataSource = dv;                     lst.DataBind(); //设置ID...然后客户端js就可以访问到需要数据了。   下面说一下客户端。客户端是通过jsonchange函数实现联动,原理呢就是“递归”。...然后打算引入jQuery和json来简化一下代码,再然后看看能不能做成纯客户端,就是不用服务器控件了,直接使用 htmlinput。

3.6K70

ADO.NET 2.0 中新增 DataSet 功能

而且,在这种情况下,该文件大小为 388 KB。...此外,该文件大小只有 59 KB — 同样,在需要传输数据量以及处理该数据所需 CPU、内存和带宽资源方面降低了一个数量级。...它采取形式是对 SQL Server 2005 XML 数据类型支持、扩展 XSD 架构支持、改进 XSD 架构推理引擎,以及两个通常很讨厌限制消除:(i) DataSet 和 DataTable...而且,多个关系中包含具有相同名称和命名空间子表可以嵌套在多个表中。...如果传入和现有就主键值达成协议,则使用该行现有 DataRowState 来处理它,否则使用“Not Present”部分(该表最后一)中内容来处理。 表 1.

3.1K100
领券