今天來談談table sort的那點事。預告一下,目的是做到前臺排序還有服務器排序區(qū)分開,目前的table的分頁實際是比較“亂”的,相信很多用的有一段時間的特別是做server排序的同學都會多多少少遇到不正常的情況。
推薦:layui教程
先看看目前l(fā)ayui自帶的排序的效果,中文按字典排序這些不是本次討論的重點,先看看如果存在整數(shù)負數(shù)還有0出現(xiàn)的情況
那么是不是調(diào)整一下sort里面的邏輯就可以了讓它對負數(shù)和0的判斷邏輯對了就好了。這個其實也不是這次討論的重點。
那么重點是,server排序,實際上絕大部分的table的排序不會只是單頁面的這樣子簡單的排序,而是把條件傳到后臺讓后臺排序,那么官方給出的一般是監(jiān)聽sort然后reload,把條件傳過去,這些都很ok,邏輯都沒問題。
but實際得到的效果呢?因為目前table沒有區(qū)分前臺排序還是server排序,在接收到數(shù)據(jù)之后再渲染表格的時候判斷到有initSort,那么會再次將數(shù)據(jù)排序,然后顯示,這就存在一個非常嚴重的問題!
明明server已經(jīng)排好序了,為啥還要js里面再sort一下,更嚴重的是,能保證sort出來的結(jié)果跟后臺排序的規(guī)則出來的結(jié)果一致么?拿什么保證呢?
看看下面的代碼監(jiān)聽reload的時候然后模擬后臺把數(shù)據(jù)按照負數(shù)<0<正數(shù)這個規(guī)則返回的data,實際reload之后是什么樣子吧。
代碼:
效果
可能你會覺得跟前面沒啥區(qū)別呀,排序的時候還是錯了呀,這正是異常的地方??纯次夷M返回的data里面的結(jié)構(gòu)吧
原始的data:
模擬的接口返回的data:
這個返回之后顯然顯示的效果跟實際數(shù)據(jù)的順序?qū)Σ簧咸?/p>
原因就是上面說的,實際發(fā)后臺排序的時候到了渲染的時候還是要走一次前臺排序,等于是做了一個畫蛇添足的處理。實際如果我們定義成server排序返回的數(shù)據(jù)就是要顯示的順序了。
絕對不能再走前端sort一下這個邏輯,不然后臺排序的意義是什么還有如何保證邏輯跟后臺是一致的,一致的話頂多算是一個無用功,但是如果不能保證一致,這個就是一個大事故了。
解決方案:提供用戶一個配置項,決定是前臺排序還是server排序。修改如下
需要修改的原始代碼區(qū)域
修改之后的對應區(qū)域的代碼:
測試的table在render的時候加入了sortType的配置
最后是sort的監(jiān)聽
最后的效果
完整的測試代碼還有對table.js的對應修改的地址:?https://pan.baidu.com/s/1OjwwVmjy02wRQ0rT1euLlQ
以上是layui中table的sort排序介紹的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動的應用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機

Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)

layui 提供了多種獲取表單數(shù)據(jù)的方法,包括直接獲取表單所有字段數(shù)據(jù)、獲取單個表單元素值、使用 formAPI.getVal() 方法獲取指定字段值、將表單數(shù)據(jù)序列化并作為 AJAX 請求參數(shù),以及監(jiān)聽表單提交事件獲取數(shù)據(jù)。

layui 登錄頁面跳轉(zhuǎn)設(shè)置步驟:添加跳轉(zhuǎn)代碼:在登錄表單提交按鈕點擊事件中添加判斷,成功登錄后通過 window.location.href 跳轉(zhuǎn)到指定頁面。修改 form 配置:在 lay-filter="login" 的 form 元素中添加 hidden 輸入字段,name 為 "redirect",value 為目標頁面地址。

使用 layui 傳輸數(shù)據(jù)的方法如下:使用 Ajax:創(chuàng)建請求對象,設(shè)置請求參數(shù)(URL、方法、數(shù)據(jù)),處理響應。使用內(nèi)置方法:使用 $.post、$.get、$.postJSON 或 $.getJSON 等內(nèi)置方法簡化數(shù)據(jù)傳輸。

通過使用layui框架的響應式布局功能,可以實現(xiàn)自適應布局。步驟包括:引用layui框架。定義自適應布局容器,設(shè)置layui-container類。使用響應式斷點(xs/sm/md/lg)隱藏特定斷點下的元素。利用網(wǎng)格系統(tǒng)(layui-col-)指定元素寬度。通過偏移量(layui-offset-)創(chuàng)建間距。使用響應式實用工具(layui-invisible/show/block/inline)控制元素的可見性和顯示方式。

layui與Vue的區(qū)別主要體現(xiàn)在功能和關(guān)注點上。layui專注于快速開發(fā)UI元素,提供預制組件簡化頁面構(gòu)建;而Vue是一個全??蚣埽⒅財?shù)據(jù)綁定、組件化開發(fā)和狀態(tài)管理,更適合構(gòu)建復雜應用程序。 layui學習簡單,適合快速構(gòu)建頁面;Vue學習曲線陡峭,但有助于構(gòu)建可擴展和易維護的應用程序。根據(jù)項目需求和開發(fā)者技能水平,可以選擇合適的框架。

layui框架是一款基于JavaScript的前端框架,提供了一套易用的UI組件和工具,幫助開發(fā)者快速構(gòu)建響應式Web應用。其特點包括:模塊化、輕量級、響應式,并擁有完善的文檔和社區(qū)支持。layui廣泛應用于管理后臺系統(tǒng)、電商網(wǎng)站和移動端應用等開發(fā)中。優(yōu)點在于上手快、提高效率、維護方便,缺點是定制性較差、技術(shù)更新較慢。

layui是一個前端UI框架,它提供了豐富的UI組件、工具和功能,幫助開發(fā)人員快速構(gòu)建現(xiàn)代化、響應式和交互式Web應用程序,特點包括:靈活輕量、模塊化設(shè)計、豐富的組件、強大的工具和易于定制。它廣泛應用于各種Web應用程序的開發(fā)中,包括管理系統(tǒng)、電商平臺、內(nèi)容管理系統(tǒng)、社交網(wǎng)絡和移動端應用。

layui 基于 HTML、CSS、JavaScript、jQuery、Less 和 Grunt 技術(shù),提供跨瀏覽器兼容性、高可定制性、易于使用、豐富的組件和活躍的社區(qū)支持。
