data layui table 排序_浅谈layui中table的sort排序

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

7134a72018936f8009ced65c80742b6d.png

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

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

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

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

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

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

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

代码:

47328dc2e0f5bd6bc921c0fc216bfdc2.png

效果

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

原始的data:

2ee2377d5e424fed1d336b5d87d91fb6.png

模拟的接口返回的data:

9de63aea691385da2b361d856fe083de.png

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

cd3d2cc056c5adc68c7ddf66c4f30a27.png

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

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

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

需要修改的原始代码区域

37461b1108144029f0eb21eebd904086.png

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

9e57a31af5c41c1086d123454c2f269f.png

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

8351e6604b83ff3702d609a41b13c496.png

最后是sort的监听

f8c74a703851e366c7d915300141f627.png

最后的效果

1574500816102735.gif完整的测试代码还有对table.js的对应修改的地址: https://pan.baidu.com/s/1OjwwVmjy02wRQ0rT1euLlQ

更多web前端开发知识,请查阅 HTML中文网 !!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/328555.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gRPC C#学习

前些天gRPC 发布1.0 版本&#xff0c;代表着gRPC 已经正式进入稳定阶段。 今天我们就来学习gRPC C# 。而且目前也已经支持.NET Core 可以实现完美跨平台。 传统的.NET 可以通过Mono 来实现跨平台调用。 GitHub&#xff1a; https://github.com/grpc/grpc gRPC 简单介绍&#x…

Java日期及时间库插件 -- Joda Time.

转载自 Java日期及时间库插件 -- Joda Time.来到新公司工作也有一个多月了, 陆陆续续做了一些简单的项目. 今天做一个新东西的时候发现了 Joda Time的这个东西, 因为以前用的都是JDK原生的时间处理API, 大家都知道Java原生的时间处理的API一直都是不太好用, 所以这个有必要去…

电商校招指导

https://www.imooc.com/article/19998 https://www.imooc.com/article/18998 鼓励大家多总结 有道笔记可以记录下来 多年总结的 平时要多总结 https://www.imooc.com/article/19094 温馨tips&#xff1a; 校招的要求会比社招低很多&#xff0c;大家要把握好机会。因为校招…

大咖开讲:一小时学会.NET MVC开发的那些事儿

许多ASP.NET开发人员开始接触MVC认为MVC与ASP.NET完全没有关系&#xff0c;是一个全新的Web开发&#xff0c;事实上ASP.NET是创建WEB应用的框架&#xff0c;而MVC是能够用更好的方法来组织并管理代码的一种更高级架构体系。我们可将原来的ASP.NET称为ASP.NET Webform&#xff0…

HashMap的实现原理及其特点

HashMap的实现原理及其特点 2018年03月15日 20:43:08 阅读数&#xff1a;11045更多 个人分类&#xff1a; Java基础知识点 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/lovewebeye/article/details/79573702 1) Hash…

重写equals就必须重写hashCode的原理分析

转载自 重写equals就必须重写hashCode的原理分析因为最近在整理Java集合的源码&#xff0c; 所以今天再来谈谈这个古老的话题&#xff0c;因为后面讲HashMap会用到这个知识点&#xff0c; 所以重新梳理下。如果不被重写&#xff08;原生Object&#xff09;的hashCode和equals是…

mysql unique count_MySQL - Count Number of Unique Values

问题If I have three columns:orderNumber, name, emailand I would like to count how many unique emails are in the table how would I go about doing so?A statement like:SELECT count(email) FROM ordersgives me the total count.I tried SELECT DISTINCT count(emai…

如何在 ASP.NET MVC 中集成 AngularJS(2)

在如何在 ASP.NET MVC 中集成 AngularJS(1)中&#xff0c;我们介绍了 ASP.NET MVC 捆绑和压缩、应用程序版本自动刷新和工程构建等内容。 下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分。 ASP.NET 捆绑和压缩 CSS 和 JavaScript 的捆绑与压缩功能是 ASP.NET MVC 最流…

bean交个spring和new比较区别

在spring的配置文件中我们要使用DataSource这个对吧 这个bean将会被多个bean引用 通过ref"dateSource"这个引用 当我们要修改这个只要修改引用就好了 不需要修改很多了 主要是解耦 比如你有一个A类 在好几个类里边要调用到A的方法 new的话就要在每个类里都new…

什么是中间件

转载自 什么是中间件什么是中间件&#xff1f; 中间件就是程序中可织入的&#xff0c;可重用的&#xff0c;与业务逻辑无关的各种组件。中间件&#xff08; middleware &#xff09;是基础软件的一大类&#xff0c;属于可复用软件的范畴。顾名思义&#xff0c;中 间件处于操作…

guid判断是否有效_让我们一起啃算法----有效的括号

有效括号&#xff08;Valid-Parentheses&#xff09;题干如下&#xff1a;给定一个只包括 ‘(‘&#xff0c;’)’&#xff0c;’{‘&#xff0c;’}’&#xff0c;’[‘&#xff0c;’]’ 的字符串&#xff0c;判断字符串是否有效。有效字符串需满足&#xff1a;1.左括号必须用…

小白科普:从输入网址到最后浏览器呈现页面内容,中间发生了什么?

转载自 小白科普&#xff1a;从输入网址到最后浏览器呈现页面内容&#xff0c;中间发生了什么&#xff1f; 1、前言 这篇文章是应网友之邀所写&#xff0c;主要描述一下我们访问网站时&#xff0c; 从输入网址到最后浏览器呈现内容&#xff0c;中间发生了什么。 之前写过两…

面试官角度的JVM面试

一个面试官对JVM面试问题的分析 2017年02月19日 21:51:34 阅读数&#xff1a;18135 标签&#xff1a; 面试官JVM面试问题分析 更多 个人分类&#xff1a; JVM 这个帖子的背景是今晚看到je上这张贴&#xff1a;http://www.iteye.com/topic/715256&#xff0c;心血来潮写下的文…

如何在 ASP.NET MVC 中集成 AngularJS(3)

今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容。 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后&#xff0c;我意识到&#xff0c;我必须提供两个版本的路由表&#xff1a;一个运行在调试模式的应用程序下和一个运行在发布模式的应用程…

小菜:关于main方法的面试题

转载自 小菜&#xff1a;关于main方法的面试题问题&#xff1a;如果main方法被声明为private会怎样&#xff1f; 答案&#xff1a;能正常编译&#xff0c;但运行的时候会提示“main方法不是public的”。问题&#xff1a;如果去掉了main方法的static修饰符会怎样&#xff1f; 答…

kali linux改中文_kali linux 2019.4设置为中文方法

就在前天&#xff0c;2019年11月26日&#xff0c;kali Linux官网发布了最新版本&#xff1a;Kali Linux 2019.4发行版&#xff0c;此版本和之前相比变动很大&#xff0c;系统界面、主题、壁纸都灿然一新。Kali Linux2019.4版本包括了一些令人兴奋的新更新:一个新的默认桌面环境…

构建高可用ZooKeeper集群

ZooKeeper 是 Apache 的一个顶级项目&#xff0c;为分布式应用提供高效、高可用的分布式协调服务&#xff0c;提供了诸如数据发布/订阅、负载均衡、命名服务、分布式协调/通知和分布式锁等分布式基础服务。由于 ZooKeeper 便捷的使用方式、卓越的性能和良好的稳定性&#xff0c…

面试官角度弹面试

http://www.iteye.com/topic/715304 这个帖子的背景是今晚看到je上这张贴&#xff1a;http://www.iteye.com/topic/715256&#xff0c;心血来潮写下的文字&#xff0c;如果能抛砖引玉&#xff0c;能有其他面试官分析一下自己面试时问的问题&#xff0c;那或许是件很有意义的事…

面试经历—广州YY(欢聚时代)

转载自 面试经历—广州YY&#xff08;欢聚时代&#xff09; 上周去YY&#xff08;欢聚时代&#xff09;面试JAVA工程师&#xff0c;现在回忆一下当时的面试过程&#xff0c;面试问的问题有&#xff1a;1、常用的集合类HashMap、HashTable、ArrayList、LinkedList、HashSet2、…

mysql binlog 备份恢复数据_Mysql结合备份+binlog恢复误删除操作数据

结合备份binlog恢复数据。场景&#xff1a;昨天晚上做了全备&#xff0c;今天上午用户不小心误删除某张表。解决方案&#xff1a;不建议在原生产环境直接恢复&#xff0c;建议在另一台机器恢复全库日志&#xff0c;然后导入到生产环境。1) 创建表select now();create table itp…