我的编程空间,编程开发者的网络收藏夹
学习永远不晚

layui使用table的sort排序的方法

短信预约 jQuery-IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

layui使用table的sort排序的方法

先看看目前layui自带的排序的效果,中文按字典排序这些不是本次讨论的重点,先看看如果存在整数负数还有0出现的情况

layui使用table的sort排序的方法

那么是不是调整一下sort里面的逻辑就可以了让它对负数和0的判断逻辑对了就好了。这个其实也不是这次讨论的重点。

那么重点是,server排序,实际上绝大部分的table的排序不会只是单页面的这样子简单的排序,而是把条件传到后台让后台排序,那么官方给出的一般是监听sort然后reload,把条件传过去,这些都很ok,逻辑都没问题。

but实际得到的效果呢?因为目前table没有区分前台排序还是server排序,在接收到数据之后再渲染表格的时候判断到有initSort,那么会再次将数据排序,然后显示,这就存在一个非常严重的问题!

明明server已经排好序了,为啥还要js里面再sort一下,更严重的是,能保证sort出来的结果跟后台排序的规则出来的结果一致么?拿什么保证呢?

看看下面的代码监听reload的时候然后模拟后台把数据按照负数<0<正数这个规则返回的data,实际reload之后是什么样子吧。

代码:

layui使用table的sort排序的方法

效果

layui使用table的sort排序的方法

可能你会觉得跟前面没啥区别呀,排序的时候还是错了呀,这正是异常的地方。看看我模拟返回的data里面的结构吧

原始的data:

layui使用table的sort排序的方法

模拟的接口返回的data:

layui使用table的sort排序的方法

这个返回之后显然显示的效果跟实际数据的顺序对不上号

原因就是上面说的,实际发后台排序的时候到了渲染的时候还是要走一次前台排序,等于是做了一个画蛇添足的处理。实际如果我们定义成server排序返回的数据就是要显示的顺序了。

绝对不能再走前端sort一下这个逻辑,不然后台排序的意义是什么还有如何保证逻辑跟后台是一致的,一致的话顶多算是一个无用功,但是如果不能保证一致,这个就是一个大事故了。

解决方案:提供用户一个配置项,决定是前台排序还是server排序。修改如下

需要修改的原始代码区域

layui使用table的sort排序的方法

修改之后的对应区域的代码:

layui使用table的sort排序的方法

测试的table在render的时候加入了sortType的配置

layui使用table的sort排序的方法

最后是sort的监听

layui使用table的sort排序的方法

最后的效果

layui使用table的sort排序的方法

关于layui使用table的sort排序的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

layui使用table的sort排序的方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

layui使用table的sort排序的方法

先看看目前layui自带的排序的效果,中文按字典排序这些不是本次讨论的重点,先看看如果存在整数负数还有0出现的情况那么是不是调整一下sort里面的逻辑就可以了让它对负数和0的判断逻辑对了就好了。这个其实也不是这次讨论的重点。那么重点是,server排序,实际上绝大部分的table的排序不会只是单页面的这样子简单的排序,
layui使用table的sort排序的方法
2024-04-02

layui table数据排序与筛选功能的实现(layui table实现数据排序与筛选功能的步骤)

layui数据排序与筛选功能实现利用layuitable插件,实现数据的排序和筛选功能,提升数据展示的灵活性。文章详细介绍了功能实现步骤:安装layui:下载layui库并引入至HTML页面。初始化table:创建表格结构,使用layuiAPI初始化table实例。实现排序:启用sort选项,指定排序规则。实现筛选:添加filter属性,指定筛选条件。处理事件:处理table的sort和filter事件,更新数据源并重新渲染table。文章还提供了示例代码和注意事项,帮助开发者快速上手。
layui table数据排序与筛选功能的实现(layui table实现数据排序与筛选功能的步骤)

layui table与第三方数据源的整合应用(layui table与第三方数据源的结合使用)

layuiTable可整合第三方数据源,通过AJAX或JSONP获取数据。具体步骤包括配置URL、请求类型、回调函数等。整合第三方数据源能拓展LayuiTable的实时更新、自定义筛选、导出导入、分页加载等功能。需要注意第三方数据源请求支持、安全性优化、性能优化等问题。
layui table与第三方数据源的整合应用(layui table与第三方数据源的结合使用)

layui table数据表格的国际化配置方法(layui table数据表的国际化设置步骤)

layuitable数据表格支持国际化配置,通过设置lang属性选择语言包。提供多种语言包,包括中文、英文等。还可自定义翻译内容,设置特定键值覆盖语言包翻译。layui提供在线语言包更新工具,方便更新。internationalizationconfigurationmethod。
layui table数据表格的国际化配置方法(layui table数据表的国际化设置步骤)

layui table合并单元格的实现方法(layui table单元格合并技巧)

layuitable单元格合并是一种常用的技巧,可提高表格的可读性和美观性。通过合并单元格,可以减少重复数据的显示,使表格布局更加紧凑。layuitable提供手动合并、配置项合并、回调函数合并三种方法。合并单元格仅支持行合并,操作需在表格渲染完成后进行。需要注意的是,合并单元格会影响行高计算和单元格编辑。
layui table合并单元格的实现方法(layui table单元格合并技巧)

layui table分页功能的实现与应用(layui table分页功能的使用与技巧)

layuitable分页功能可以通过page选项实现。参数包括:curr(当前页码)、limit(每页显示条数)、limits(可选显示条数)、layout(分页条布局)、first/last/prev/next(文本设置)。技巧包括:优化查询效率、调整每页显示条数、自定义分页布局、监听分页事件、配合搜索功能。合理配置分页选项和应用技巧,可打造高效、美观的数据表格。
layui table分页功能的实现与应用(layui table分页功能的使用与技巧)

layui table组件的样式定制与扩展(自定义和扩展layui table组件样式的方法)

LayuiTable组件样式定制与扩展指南本指南介绍了使用LayuiTable组件进行样式定制和扩展的方法。样式定制:使用内置主题或创建自定义主题。覆盖默认样式以实现自定义外观。扩展:添加自定义列,支持多种数据类型。添加工具栏,提供搜索、排序等操作。与其他Layui组件整合,增强交互性。掌握这些技巧,开发者可以为LayuiTable组件创建个性化且功能强大的界面,提升用户体验。
layui table组件的样式定制与扩展(自定义和扩展layui table组件样式的方法)

layui table响应式布局的设计与实现(构建响应式layui table布局的方法)

layui表格响应式布局指南本文介绍了构建响应式layuitable布局的详细方法,包括初始化表格、设置媒体查询、调整表头宽度、隐藏/显示列和添加可滚动区域。通过遵循这些步骤,可以创建可在各种设备屏幕尺寸上无缝显示数据的响应式表格。
layui table响应式布局的设计与实现(构建响应式layui table布局的方法)

layui table数据加载与渲染的最佳实践(layui table数据加载与呈现的优化方法)

本篇文章阐述了layuitable数据加载与呈现的优化方法。通过分页加载、按需加载、使用CDN等技术,优化数据加载。同时,采用虚拟渲染、模板引擎、条件渲染等技巧,提升数据呈现效率。此外,使用轻量级框架、启用硬件加速等方式,进一步提升页面性能。文中提供了具体实现示例,以帮助读者理解和应用这些优化方法。
layui table数据加载与渲染的最佳实践(layui table数据加载与呈现的优化方法)

layui table组件的兼容性分析与测试(探讨layui table组件的兼容性及其测试方法)

layuiTable组件兼容性layuiTable组件是一款轻量级数据表格框架,兼容主流浏览器(包括IE11+)和设备(桌面端、移动端、平板端)。它支持跨平台,与其他layui插件集成,并提供丰富的扩展API。测试兼容性为了确保组件稳定运行,需要进行全面兼容性测试:单元测试:确认功能模块正常工作。集成测试:验证与其他组件和业务逻辑的兼容性。浏览器兼容性测试:检验组件在不同浏览器中的表现。设备兼容性测试:确保组件适应不同屏幕尺寸和手势操作。跨平台兼容性测试:保证组件在不同操作系统上正常运行。第三方插件兼容性
layui table组件的兼容性分析与测试(探讨layui table组件的兼容性及其测试方法)

layui table数据加载失败时的处理策略(处理layui table数据加载失败情况的方法)

layuitable数据加载失败处理策略:检查网络和后端接口。检查前端代码配置。设置错误处理回调函数。优化网络请求。容错处理。前端监控。持续优化。
layui table数据加载失败时的处理策略(处理layui table数据加载失败情况的方法)

web前端:jQuery对象只能使用jQuery提供的方法,不能使用原生js提供的方法

编程学习网:jQuery是一个快速、简洁的Javascript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是writeLess,DoMore,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化html文档操作、事件处理、动画设计和Ajax交互。
web前端:jQuery对象只能使用jQuery提供的方法,不能使用原生js提供的方法

vue-router:嵌套路由的使用方法

嵌套路由的使用VueRouter的嵌套路由功能可通过创建带有子路由的路由对象来组织路由。在父组件中使用router-view渲染子路由。数据可通过props选项从父组件传递。嵌套路由提供组织结构、代码重用、灵活导航和页面缓存等优势。注意事项包括正确传递props、避免循环引用,并考虑使用动态路由处理动态路径段。
vue-router:嵌套路由的使用方法

CSS代码检查工具stylelint的使用方法详解

CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑。 CSS 是以描述为主的样式表,如果描述得混乱、没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群。CSS 看似简单,想要写出漂亮的 CSS 还是相当困难。所以校验 CSS 规则的行动
CSS代码检查工具stylelint的使用方法详解
2024-04-02

使用display:none时隐藏DOM元素无法获取实际宽高的解决方法

案例说明当DOM元素被添加上display:none;的样式时,这个元素和它的子元素无法获取到实际的宽高。如图,我设置了一个父元素和一个子元素,并且通过一个按钮切换父元素是否带有display:none;。然后每次点击按钮后,在控制台输出两个元素的高度。可以看到,
使用display:none时隐藏DOM元素无法获取实际宽高的解决方法
2024-04-02

web前端:[前端第三课]HTML元素的简介与使用方法

编程学习网:一个网页对应于一个html文件,HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。标准的HTML文件都具有一个基本的整体结构,即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。
web前端:[前端第三课]HTML元素的简介与使用方法

用css截取字符的几种方法详解(css排版隐藏溢出文本)

方法一:复制代码 代码如下:<div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串  <
用css截取字符的几种方法详解(css排版隐藏溢出文本)
2024-04-02

web前端:关于Vue中,在方法中使用(操作)子组件获取到的数据

编程学习网:Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品,这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室,同样也能满足3D自由艺术家。
web前端:关于Vue中,在方法中使用(操作)子组件获取到的数据

编程热搜

  • HTML常用标签超详细整理
    目录HTML概述1.1 什么是HTML1.2 HTML概念HTML常用基础标签标签的分类:常用基本标签HTML概述1.1 什么是HTMLHTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动
    HTML常用标签超详细整理
  • 一文看懂服务器操作
    web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的。
    一文看懂服务器操作
  • web前端:如何正确学习web前端流程以及如何找工作
    编程学习网:HTML、CSS、Javascript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时,HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。
    web前端:如何正确学习web前端流程以及如何找工作
  • 完美实现浮动元素横排居中显示
    经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的。注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成。一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看。首先看html
    完美实现浮动元素横排居中显示
  • 共同探讨CSS+DIV布局对建站的影响
    编程学习网:DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。现在就跟着小编共同来学习一下:共同探讨CSS+DIV布局对建站的影响。
    共同探讨CSS+DIV布局对建站的影响
  • 详解CSS伪元素的妙用单标签之美
    目录:before和::before的区别哪些标签不支持伪元素?利用 after 清除浮动伪元素与css sprites 雪碧图单个颜色实现按钮 hover 、a
    详解CSS伪元素的妙用单标签之美
  • web前端:实现单选框点击label标记中的文字也能选中
    编程学习网:label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
    web前端:实现单选框点击label标记中的文字也能选中
  • 为你介绍CSS浮动清除最好的方法
    编程学习网:所谓网站(Website),就是指在网际网路(因特网)上,根据一定的规则,使用HTML等工具制作的用於展示特定内容的相关网页的集合。现在就跟着小编共同来学习一下:为你介绍CSS浮动清除最好的方法。
    为你介绍CSS浮动清除最好的方法
  • 如何提升网页的加载速度?
    编程学习网:相信在使用浏览器去浏览网页的时候,有些时候总会是出现网页加载慢的情况,除了网速的问题的话,更多的时候还是需要进行相关的设置来去提升网页的加载速度,会发现快的速度将会是让人感觉到非常的爽,下面我们来分享一下该如何才能进行优化,最终提升效率。方法是有很多种,在这里就不逐个的来列举出来了,有需要的朋友们可以参考一下。
    如何提升网页的加载速度?
  • web前端:js垃圾回收及内存泄漏
    编程学习网:Javascript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。
    web前端:js垃圾回收及内存泄漏

目录