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

jquery datatable在表内隐藏图标

jQuery DataTables是一个功能强大的jQuery插件,用于在网页上展示和操作大量数据。它提供了丰富的功能和灵活的配置选项,使得数据的展示和操作变得简单和高效。

在表内隐藏图标可以通过以下步骤实现:

  1. 首先,在HTML页面中引入jQuery和DataTables的相关文件。可以通过CDN链接或者本地文件引入。
代码语言:html
复制
<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页面中创建一个表格,并给表格添加一个唯一的ID。
代码语言:html
复制
<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td><i class="fa fa-eye"></i></td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
      <td><i class="fa fa-eye"></i></td>
    </tr>
    <!-- 其他数据行 -->
  </tbody>
</table>
  1. 使用jQuery DataTables初始化表格,并配置隐藏图标的列。
代码语言:javascript
复制
$(document).ready(function() {
  $('#myTable').DataTable({
    columnDefs: [{
      targets: [3], // 需要隐藏图标的列索引,从0开始计数
      visible: false // 设置该列不可见
    }]
  });
});

在上述代码中,我们使用columnDefs配置项来定义列的属性。targets指定需要隐藏图标的列索引,这里是第4列(从0开始计数)。visible设置为false表示该列不可见。

通过以上步骤,就可以在jQuery DataTables中实现对表内图标的隐藏。

推荐的腾讯云相关产品:腾讯云服务器(CVM)、腾讯云数据库(TencentDB)、腾讯云对象存储(COS)等。您可以访问腾讯云官方网站获取更多产品信息和详细介绍。

腾讯云官方网站:https://cloud.tencent.com/

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

相关·内容

Jquery DataTable 的学习之隐藏和显示列(三)

2017-01-17 15:13:37 大数据量的前提下,会出现列很多的情况,浏览器会呈现出滚动条,但是用户需要看到的并不一定是所有的信息,那么就需要对表格的数据进行筛选,在前面的文章中介绍到了搜索和排序...如果可以将不想看到的列隐藏掉就可以了,下面来看一下代码。...$(document).ready(function() { $('#example').dataTable( { "aoColumnDefs": [ { "bSearchable": false...$(document).ready(function() { var myTable = $('#example').dataTable(); } ); 然后进行隐藏或者是显示操作 myTable.column...(0).visible(false)//将第一列的数据隐藏 myTable.column(1).visible(true)//让第二列的数据显示 这样初始化之后,再通过触发事件就可以实现动态控制某列隐藏或者是显示了

2.7K10

ABAPABAP 740后支持的filter操作

ABAP和Java的Array一样,都是面向过程编程时代的产物。最近Jerry手头的工作,经常需要和Java Array对象化之后的集合类型和Java 8推出的流式API打交道。...图一这种filter操作ABAP无法支持,但ABAP 740后新增了一个FILTER关键字。 ?...图1的Lambda函数的逻辑即比较集合元素代表的时间值是否早于当前时间转换成UTC后的时间。 再看看ABAP支持的FILTER关键字。...还是以ABAP开发人员喜闻乐见的SPFLI为例,740之前,如果想从表里提取出部分满足WHERE条件的部分记录,必须要用图2的LOOP操作。 ?...如果想支持多个过滤条件也是可以的,把过滤条件维护一张过滤表里即可,如图4: ? 他的留言板 关注

64810

datatables应用程序接口API

()API 获得表格的settings对象 state()API 得到表格最新存储的状态 state.clear()API 清除表格储存的状态 state.loaded()API 获取初始化期间加载的状态...内部数据中的数据 cell().node()DT 获得选中单元格的dom cell().render()DT 获得渲染过的单元格数据 cell()DT 获取中一个单元格 cells().cache()...column().visible()DT 获得那些列隐藏或者设置指定列隐藏 column()DT 表格上选择一列 column.index()DT Convert between column index...columns().visible()DT 得到隐藏列或者设置隐藏列 columns()DT 从表格选择多列 columns.adjust()DT 重新计算列宽 行(Rows) 名称 说明 row(...实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT 转为jQuery实例 unique()DT 去重 unshift()DT 结果集里从头添加一个或多个项目

4.4K30

SAP HANA SLT隐藏字段并传入HANA的方法

我们这里来借助HR模块的来做演示 HR模块的PA2001需要把数据复制到HANA中。 需要在PA2001隐藏2列(例如UMSCH&UMSKD)并复制到HANA中。...第二步: 选择一个系统的中存在的schema,如下图所示 ? 第三步: 点开Rule assignment,右键添加,如下图所示 ?...第六步: 选中我们添加的PA2001,然后再选择Field related Rule,如下图所示 ? 第七步: 第六步选择后,会打开一个新窗口 ?...第九步: 选择Field related rule 输入要隐藏的字段名称 Line of code字段填上实际的值 这里有个限制:100个字符和ABAP代码/语言 将“E_”放在字段的前面(例如EMSCH...第十四步: 复制窗口中找到我们的PA2001,检查是否是schedule,如图所示 ? 第十五步: 从HANA Modeller透视图打开,并检查表中的那些字段是否被屏蔽。 ?

3K20

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

实际的应用中,配合JQuery、CSS样式和Ajax,可以发挥强大的威力,达到“无所不能”的境界。 表格还是列表? 输出数据库中数据列表,实际上就是以格式化的方法,把一个多行多列的数据展示出来。...下面,我们不妨按照上述的构造思路构造一个数据列表,使用的范例数据库中book数据如下: ?...本着最简单的原则,表头可以从DataTable中获取,如dt.Columns[i].ColumnName就可以返回dt的第i列的名。...尽管可以查询sql语句中对列名就重新命名,但为了通用性,仍然增加了这个选择。 2、列的隐藏。某些列,可能会用到,但是不需要显示。比如,ID列。 3、控制链接。...4、前端代码需要ID列,但不要显示 可以通过JS代码或者JQuery代码隐藏第一列。 5、新增控制列 可以通过前端代码,对行或者表格的单击事件进行处理,提取该行的ID,并转换为相应的控制链接。

2.5K50

【SAP HANA系列】SAP HANA SLT隐藏字段并传入HANA的方法

SLT是NetWeaver平台上运行的SAP Landscape Transformation Replication Server(SLT)。...我们这里来借助HR模块的来做演示 HR模块的PA2001需要把数据复制到HANA中。  需要在PA2001隐藏2列(例如UMSCH&UMSKD)并复制到HANA中。...第一步: 运行SLT的配置的TCODE:/LTRS,如下图所示 第二步: 选择一个系统的中存在的schema,如下图所示 第三步: 点开Rule assignment,右键添加,如下图所示...选择Field related rule 输入要隐藏的字段名称 Line of code字段填上实际的值 这里有个限制:100个字符和ABAP代码/语言 将“E_”放在字段的前面(例如EMSCH或E_EMSCH...,然后执行 第十四步: 复制窗口中找到我们的PA2001,检查是否是schedule,如图所示 第十五步: 从HANA Modeller透视图打开,并检查表中的那些字段是否被屏蔽。

2.2K40

动手实践:美化 Jenkins 报告插件的用户界面

警告插件中,您将找到一个示例:小型设备上,有一张可见的卡片可以轮播中显示一张饼图。如果要在较大的设备上打开同一页面,则会并排显示两个饼图,并且轮播会被隐藏。...您可以在这些卡中显示插件的任何图标,但是建议使用现有的 Font Awesome 图标之一,以 Jenkins 的插件生态系统中获得一致的外观。...使用此基于 JS 的控件可免费提供其他功能: 通过文本搜索过滤结果 提供结果集的分页 一次按多列排序数据 使用 Ajax 调用获取行 根据屏幕分辨率显示和隐藏列 为了视图中使用 DataTables... $('#id').DataTable(); 用您的 HTML 表格元素的 ID 替换上面代码中的 ID 到目前为止, Forensics...因此,如果选项卡中隐藏了几个,则仅按需加载内容,从而减少了要传输的数据量。

5.8K10

RPA与Excel(DataTable)

工作移动和滚动 向上、下、左或右移动一个单元格:箭头键 移动到当前数据区域的边缘:Ctrl+箭头键 移动到行首:Home 移动到工作的开头:Ctrl+Home 移动到工作的最后一个单元格,位于数据中的最右列的最下行...受保护的工作上的非锁定单元格之间移动:Tab 3.选定区域移动 选定区域从上往下移动:Enter 选定区域从下往上移动:Shift+Enter 选定区域中从左向右移动。...应用或取消加粗格式:Ctrl+B 应用或取消字体倾斜格式:Ctrl+I 应用或取消下画线:Ctrl+U 应用或取消删除线:Ctrl+5 隐藏选定行:Ctrl+9 取消选定区域的所有隐藏行的隐藏状态:Ctrl...+Shift+((左括号) 隐藏选定列:Ctrl+(零) 取消选定区域的所有隐藏列的隐藏状态:Ctrl+Shift+)(右括号) 对选定单元格应用外边框:Ctrl+Shift+& 取消选定单元格的外边框...显示、隐藏和分级显示数据 对行或列分组:Alt+Shift+向右键 取消行或列分组:Alt+Shift+向左键 显示或隐藏分级显示符号:Ctrl+8 隐藏选定的行:Ctrl+9 取消选定区域的所有隐藏行的隐藏状态

5.6K20

dataTable参数说明

标准界面右下角显示总数和过滤条数的控件)的显隐 Boolean true lengthChange 控制是否能够调整每页的条数,如果设为false,标准的每页条数控制控件也会被隐藏...Javascript数组对象方式设定列表显示数据 数组对象 ajax String模式: 直接传入一个string作为远程ajax请求路径 String 对象模式: 支持JQuery.ajax...例如: $('#example').dataTable( { "ajax": { "url": url, "type": "POST" } } ); JQuery...ajax 函数对应参数 ajax.data 和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当 serverSide参数为true的时候,参数属性才有意义,当serverSide...Number /Array false destroy 设为ture时通知dataTable函数完全重新建立一个新的控件实例,一个页面反复对同一个控件加载dataTable函数并且想重新建立控件时使用

4.5K20

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

使用场景:不使用Django的模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。..."(获取 _MAX_ 项结果)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "中数据为空...fa-pencil' </i 删除</button "; return strModify + strDelete; } }, ]; 上面的列内容中,第1列是隐藏内容...但是使用了get方式后,某页进行操作再进行上面的JS刷新时会出现行序号紊乱或者分页信息被重置的问题。 这也是我碰到的一个坑。 特此记录一下。...这个方法是将你的数据跟据你的页码,页面大小,分好页 def page(deploy_list ,limit,offset):#查询分页,调用此方法需要传获取的数据列表,页面大小,页码 # 取出该所有数据

4.9K20
领券