如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了,

效果如下

解决办法就是给图标加定位,过长的时候加上

        .show-sort{
position: absolute;
right: 7px;
top: 5px;
}

$('.layui-table-header tr th').each(function(i,ths){
$(this).find('span:first').attr('title',$(this).find('span:first').text()); // 划过显示
if($(this).find('span:first').width() > $(this).find('.layui-table-cell').width()){
$(this).find('span:last').addClass('show-sort')
}else{
$(this).find('span:last').removeClass('show-sort')
}
})

修改后效果如下

layui数据表格排序图标被超出的表头挤出去的更多相关文章

  1. LayUI——数据表格使用

    Layui数据表格的实际项目使用 Layui的数据表格可谓是在后台管理的页面中经常用到的工具了 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮 ...

  2. layui 数据表格自带的导出Excel,身份证等E+/000问题解决

    layui数据表格的工具栏自带导出Excel 会将身份证等 长整数的 自动变成E+并且 后面有000.从而导致数据不能完整导出. 解决方案: 1.先下载Excel的插件包.将压缩包内的两个js放到 l ...

  3. layui数据表格搜索

    简单介绍 我是通过Servlet传递json给layui数据表格模块,实现遍历操作的,不过数据量大的话还是需要搜索功能的.这是我参考网上大佬代码写出的搜索功能. 实现原理 要实现搜索功能,肯定需要链接 ...

  4. 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

    关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

  5. Layui数据表格模型

    视图模型 package com.meiyou.model; import org.springframework.context.annotation.Bean; import java.io.Se ...

  6. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

  7. 使用webapi绑定layui数据表格完整增删查改记录

    因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...

  8. 解决:layUI数据表格+简单查询

    解决:layUI数据表格+简单查询 最近在用layui写项目,在做到用户查询时,发现在layui框架里只有数据表格,不能增加查询.于是自己摸索了一下,写个笔记记录一下. 我想要的效果: 1.定义查询栏 ...

  9. layui数据表格导入数据

    作为一个后端程序员,前端做的确实很丑,所以就学习了一下layui框架的使用.数据表格主要的问题就是传输数据的问题,这里我用我的前后端代码来做一个实际的分解. 前端部分 可以到layui官网示例中找到数 ...

随机推荐

  1. windows一次无线网卡被关闭事件

    使用的是Dell的笔记本,fn+无线图标莫名的是蓝牙的启动. 有一天突然无线网卡无法上网,无法发现无线网络: 1. 在服务中开启"Wired AutoConfig"以及“WLAN ...

  2. C# 打印倒三角

    void test6(int num) { try { #region 方法1 int maxstar = (num - 1) * 2 + 1; string line = ""; ...

  3. 【MM系列】SAP MM模块-查看移动平均价的历史记录

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-查看移动平均价的历 ...

  4. Centos 安装Jenkins的坎坷

    安装Jenkins(简单复制即可) wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.rep ...

  5. 【转】centos7安装

    转自:https://blog.csdn.net/qq_42570879/article/details/82853708 1.CentOS下载CentOS是免费版,推荐在官网上直接下载,网址:htt ...

  6. 这款多线程中间件,吊打 Redis!

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 今天给大家介绍的是KeyDB,KeyDB项目是从redis fork出来的分支.众所周知redis是一个单线程的kv内存存储 ...

  7. windows上安装 包管理工具choco及scoop

    1.安装 choco: 1.1.使用管理员方式打开 PowerShell 1.2.输入 Set-ExecutionPolicy RemoteSigned,输入 Y 1.3.安装 choco输入:iwr ...

  8. c语言中字符串跨行书写的问题

    字符串常量定义时的换行问题     如果我们在一行代码的行尾放置一个反斜杠,c语言编译器会忽略行尾的换行符,而把下一行的内容也算作是本行的内容.这里反斜杠起到了续行的作用.        如果我们不使 ...

  9. 【ES6】迭代器与可迭代对象

    ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方 ...

  10. win10无法开启网络发现怎么办 如何启用网络发现

    鼠标右键点击桌面左下角的开始按钮,在弹出的菜单中选择“运行”菜单项.   在打开的Windows10运行窗口中,输入Services.msc,然后点击确定按钮.   在打开的Windows10服务窗口 ...