layui 自定义排序_浅谈layui中table的sort排序

最新推荐文章于 2024-09-25 16:23:17 发布
最新推荐文章于 2024-09-25 16:23:17 发布
阅读量2.6k 收藏
点赞数
文章标签： layui 自定义排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39662142/article/details/112891940
版权
layui的table模块在处理排序时，可能存在前端排序与服务器排序冲突的问题。文章探讨了layui自带排序的局限性，尤其是当涉及到负数、0的排序逻辑时，并指出在服务器已排序的情况下，前端再次排序可能导致显示结果错误。解决方案是添加一个配置项以区分前端和服务器排序，避免不必要的前端排序操作。完整测试代码和修改后的table.js可在提供的链接中获取。
摘要由CSDN通过智能技术生成

table模块是layui框架最核心的组成之一，它用于对表格进行一些列功能和动态化数据操作，本文介绍了layui中table的sort排序，解决了在我们使用sort排序时可能遇到的一些问题。

今天来谈谈table sort的那点事。预告一下，目的是做到前台排序还有服务器排序区分开，目前的table的分页实际是比较“乱”的，相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到不正常的情况。

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

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

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

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

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

看看下面的代码监听reload的时候然后模拟后台把数据按照负数<

最低0.47元/天 解锁文章
weixin_39662142
关注
layui列表拖动排序_layui中table的sort排序介绍
weixin_39723248的博客
12-19 1197
今天来谈谈table sort的那点事。预告一下，目的是做到前台排序还有服务器排序区分开，目前的table的分页实际是比较“乱”的，相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到不正常的情况。先看看目前layui自带的排序的效果，中文按字典排序这些不是本次讨论的重点，先看看如果存在整数负数还有0出现的情况那么是不是调整一下sort里面的逻辑就可以了让它对负数和0的判断逻辑对...
layui 自定义排序_【WEB前端开辟】layui中table的sort排序引见
weixin_33416318的博客
12-23 1074
本日来谈谈table sort的那点事。预报一下，目标是做到前台排序另有服务器排序区离开，现在的table的分页现实是比较“乱”的，置信很多用的有一段时间的特别是做server排序的同砚都邑多多少少碰到不正常的状况。引荐：layui教程先看看现在layui自带的排序的效果，中文按字典排序这些不是本次议论的重点，先看看假如存在整数负数另有0涌现的状况那末是否是调解一下sort内里的逻辑就能够了让它对...
layui表格排序扩展自定义排序规则
lihefei_coder的博客
01-17 1万+
layui框架表格只支持数字排序，不能支持自定义排序，于是自己在原有的代码基础上增加了自定义排序功能， 本次修改的是layui2.1.2版本的 table.js 实现思路 在原排序数组每一项里新增为数字类型的临时属性，再通过这个数字进行排序 demo下载地址 https://download.csdn.net/download/lihefei_coder/10923718 注：需积分下载 使用方式...
Layui数据表格开启前端排序切换功能实现Demo
最新发布
qq_18991291的博客
09-25 813
Layui数据表格开启前端排序切换功能的实现
layui表格（table）排序
热门推荐
卡卡罗特的博客
07-09 3万+
layui表格本身提供sort排序，但是只能排序当前一页；如果后台返回几十页数据，需要排序显示，该如何做呢，这里闲心大神提供了一个sort监听方法：通过监听排序的列，把对应的参数传给后台，然后重渲染表格就行了 //监听表格排序问题 table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-fil...
layui 排序
weixin_42873786的博客
12-23 1342
layui 排序 排序重载 table.on('sort(test)', function(obj){ //执行重载 table.reload('testReload', { url: '', request: { pageName: 'page' //页码的参数名称，默认：page ,limi
layui-vue + Flask 实现 Table 排序显示
m0_56699208的博客
01-29 804
在编写使用 Vue + layui 的中后台系统时，table页面通常是必不可少的。要在 Vue 中实现基于某一列的排序，我们需要更新 columns 数组中相应列的定义，以便包含排序的逻辑。，我们需要在后端设置一个能够接收排序参数并根据这些参数返回排序后数据的接口。举例：在代码中，我希望基于 “类型” 这一列进行排序。，我们可以创建一个简单的后端服务来处理带有排序参数的请求，并根据这些参数返回排序后的数据。前端，我们需要创建一个函数，它会向后端发送一个包含排序参数的请求。这个函数将接收排序字段（
比较常用的排序算法总结
qq_44665427的博客
11-09 176
常用的排序 冒泡排序 选择排序 插入排序 桶排序 希尔排序 归并排序 快速排序 基数排序 堆排序 第一 冒泡排序 由于简单直接上代码 for(int i=1;i<=n;i++){ for(int j=i+1;j<=n;j++){ if(a[i]>a[j]) swap(a[i],a[j]);//当前的数大于后面的数，交换 } } 第二 选择排序 每次找到数组中最大或最小的数，将他与前面的数交换 for(int i=1;i<n;i++){ mina=-1;//更新
layui 自定义排序_改造 layui 表格组件实现多重排序
weixin_35225189的博客
12-23 1632
layui的表格组件目前只支持单列排序，在实际应用中并不能很好的支撑我们的业务需求。今天一时手痒，决定改造一番以支持多重排序。实现思路也比较简单，只需要用一个数组来存放所有排序的列，再把这个数组传到后端(后端排序)进行排序即可。沿用一般的使用习惯，按住 shift键点击表头可增加排序列，按住 ctrl键点击表头可减少排序列。话不多说，先上最终效果图：1.定义排序列数组我当前用的是 2.5....
layui 自定义排序_layui使用心得
weixin_42492215的博客
12-23 1572
首先先说一下input的各个属性：class="layui-input"-------将input定义为layui样式，name="finishdate"-------规定了input的名称，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，lay-verify="required"-------表单验证(在js中书写form.verify()方法对自定义的标签值进行校验 ),pl...
Layui数据表格table排序（后端PHP）
夏已微凉、
07-03 2619
Layui数据表格table排序（后端PHP）
layui2.2.5表格排序功能自定义扩展
01-17
layui框架表格只支持数字排序，不能支持自定义排序，于是自己修改底层源码上增加了自定义排序功能
html table列自定义排序排序
05-18
table table自定义列排序；目前支持数值排序，文本（支持中文）排序； 示例： var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);
LayUi数据表格自定义赋值方式
10-16
今天小编就为大家分享一篇LayUi数据表格自定义赋值方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
拖拽插件 jquery dragsort
02-12
很好用的拖拽插件 官网: dragsort.codeplex.com 引入jquery包 然后导入diagsort包 [removed][removed] 使用 $("ul").dragsort() 默认拖拽的标签的li 可以通过修改dragSelector参数实现拖拽其他标签 例如拖拽tr标签 $("table").dragsort({ dragSelector: "tr"}) 停止拖拽 $("ul").dragsort("destroy"); 拖拽完成后的回调 $("ul").dragsort({dragEnd: function() { }}; 可以在回调中 通过each查询标签顺序 --------------------- 作者：天蝎座的贱人 来源：CSDN 原文：https://blog.csdn.net/scopop/article/details/14230703 版权声明：本文为博主原创文章，转载请附上博文链接！
js Table 选中行排序 多列锁定（多个OrderBy）
06-03
比较乱~没来得及优化 有需要的可以参考 IE6 Opera 测试通过
layui框架中表格(table)中实现按照星级评分(rate)排序(sort)
weixin_45926420的博客
06-08 3995
项目需求：在layui的table中设置星级(rate)，并使用sort进行对星级的排序。 星级评分显示：templet/,done:function()/rate.render() table的定义如下： <table id="test" lay-filter="test"></table> //这里的id值对应下面table,render里面的elem值， //lay-filter的值是监听事件第一个参数里面对应的值,比如table.on('tool(test)',func
【前端】Layui动态数据表格拖动排序
qq_25285531的博客
09-01 6019
目的：使用Layui的数据表格，拖动行进行排序。使用插件：layui-soul-table 和 Layui结合Layui并参看官方教程，写的比较详细页比较简单。实现效果：可以拖动行进行排序，可以搜索。
layui中table的sort排序介绍
qq_35146059的博客
03-24 2515
layui中table的sort排序介绍
layui table 如何自定义排序
04-18
1. 在 table 配置中加入 sort 排序属性： ``` table.render({ elem: '#test' ,data: data ,cols: [ /*省略其他配置项*/ ] ,sort: function(obj){ // obj 的格式为： { field: 'id', type: 'asc' }，即排序的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值