今天來(lái)談?wù)則able sort的那點(diǎn)事。預(yù)告一下，目的是做到前臺(tái)排序還有服務(wù)器排序區(qū)分開(kāi)，目前的table的分頁(yè)實(shí)際是比較“亂”的，相信很多用的有一段時(shí)間的特別是做server排序的同學(xué)都會(huì)多多少少遇到不正常的情況。
推薦：layui教程
先看看目前l(fā)ayui自帶的排序的效果，中文按字典排序這些不是本次討論的重點(diǎn)，先看看如果存在整數(shù)負(fù)數(shù)還有0出現(xiàn)的情況
那么是不是調(diào)整一下sort里面的邏輯就可以了讓它對(duì)負(fù)數(shù)和0的判斷邏輯對(duì)了就好了。這個(gè)其實(shí)也不是這次討論的重點(diǎn)。
那么重點(diǎn)是，server排序，實(shí)際上絕大部分的table的排序不會(huì)只是單頁(yè)面的這樣子簡(jiǎn)單的排序，而是把條件傳到后臺(tái)讓后臺(tái)排序，那么官方給出的一般是監(jiān)聽(tīng)sort然后reload，把條件傳過(guò)去，這些都很ok，邏輯都沒(méi)問(wèn)題。
but實(shí)際得到的效果呢？因?yàn)槟壳皌able沒(méi)有區(qū)分前臺(tái)排序還是server排序，在接收到數(shù)據(jù)之后再渲染表格的時(shí)候判斷到有initSort，那么會(huì)再次將數(shù)據(jù)排序，然后顯示，這就存在一個(gè)非常嚴(yán)重的問(wèn)題！
明明server已經(jīng)排好序了，為啥還要js里面再sort一下，更嚴(yán)重的是，能保證sort出來(lái)的結(jié)果跟后臺(tái)排序的規(guī)則出來(lái)的結(jié)果一致么？拿什么保證呢？
看看下面的代碼監(jiān)聽(tīng)reload的時(shí)候然后模擬后臺(tái)把數(shù)據(jù)按照負(fù)數(shù)<0<正數(shù)這個(gè)規(guī)則返回的data，實(shí)際reload之后是什么樣子吧。
代碼：
效果
可能你會(huì)覺(jué)得跟前面沒(méi)啥區(qū)別呀，排序的時(shí)候還是錯(cuò)了呀，這正是異常的地方?？纯次夷M返回的data里面的結(jié)構(gòu)吧
原始的data：
模擬的接口返回的data：
這個(gè)返回之后顯然顯示的效果跟實(shí)際數(shù)據(jù)的順序?qū)Σ簧咸?hào)
原因就是上面說(shuō)的，實(shí)際發(fā)后臺(tái)排序的時(shí)候到了渲染的時(shí)候還是要走一次前臺(tái)排序，等于是做了一個(gè)畫(huà)蛇添足的處理。實(shí)際如果我們定義成server排序返回的數(shù)據(jù)就是要顯示的順序了。
絕對(duì)不能再走前端sort一下這個(gè)邏輯，不然后臺(tái)排序的意義是什么還有如何保證邏輯跟后臺(tái)是一致的，一致的話頂多算是一個(gè)無(wú)用功，但是如果不能保證一致，這個(gè)就是一個(gè)大事故了。
解決方案：提供用戶一個(gè)配置項(xiàng)，決定是前臺(tái)排序還是server排序。修改如下
需要修改的原始代碼區(qū)域
修改之后的對(duì)應(yīng)區(qū)域的代碼：
測(cè)試的table在render的時(shí)候加入了sortType的配置
最后是sort的監(jiān)聽(tīng)
最后的效果
完整的測(cè)試代碼還有對(duì)table.js的對(duì)應(yīng)修改的地址：?https://pan.baidu.com/s/1OjwwVmjy02wRQ0rT1euLlQ
Atas ialah kandungan terperinci layui中table的sort排序介紹. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana untuk mendapatkan data borang dalam layui
Apr 04, 2024 am 03:39 AM
layui menyediakan pelbagai kaedah untuk mendapatkan data borang, termasuk mendapatkan terus semua data medan borang, mendapatkan nilai elemen bentuk tunggal, menggunakan kaedah formAPI.getVal() untuk mendapatkan nilai medan yang ditentukan, menyerikan data borang dan menggunakannya sebagai parameter permintaan AJAX, dan mendengar acara penyerahan Borang mendapat data.
Bagaimana untuk menyediakan lompat pada halaman log masuk layui
Apr 04, 2024 am 03:12 AM
Langkah penetapan lompat halaman log masuk Layui: Tambah kod lompat: Tambah pertimbangan dalam borang log masuk serah acara klik butang, dan lompat ke halaman yang ditentukan melalui window.location.href selepas berjaya log masuk. Ubah suai konfigurasi borang: tambah medan input tersembunyi pada elemen borang lay-filter="login", dengan nama "redirect" dan nilainya ialah alamat halaman sasaran.
Bagaimana untuk memindahkan data dalam layui
Apr 26, 2024 am 03:39 AM
Kaedah menggunakan layui untuk menghantar data adalah seperti berikut: Gunakan Ajax: Cipta objek permintaan, tetapkan parameter permintaan (URL, kaedah, data), dan proses respons. Gunakan kaedah terbina dalam: Permudahkan pemindahan data menggunakan kaedah terbina dalam seperti $.post, $.get, $.postJSON atau $.getJSON.
Bagaimana layui melaksanakan penyesuaian diri
Apr 26, 2024 am 03:00 AM
Susun atur suai boleh dicapai dengan menggunakan fungsi susun atur responsif rangka kerja layui. Langkah-langkahnya termasuk: merujuk rangka kerja layui. Tentukan bekas susun atur penyesuaian dan tetapkan kelas bekas layui. Gunakan titik putus responsif (xs/sm/md/lg) untuk menyembunyikan elemen di bawah titik putus tertentu. Tentukan lebar elemen menggunakan sistem grid (layui-col-). Cipta jarak melalui offset (layui-offset-). Gunakan utiliti responsif (layui-invisible/show/block/inline) untuk mengawal keterlihatan elemen dan cara ia muncul.
Apakah perbezaan antara layui dan vue?
Apr 04, 2024 am 03:54 AM
Perbezaan antara layui dan Vue terutamanya ditunjukkan dalam fungsi dan kebimbangan. Layui memfokuskan pada pembangunan pesat elemen UI dan menyediakan komponen pasang siap untuk memudahkan pembinaan halaman manakala Vue ialah rangka kerja tindanan penuh yang memfokuskan pada pengikatan data, pembangunan komponen dan pengurusan keadaan, dan lebih sesuai untuk membina aplikasi yang kompleks. Layui mudah dipelajari dan sesuai untuk membina halaman dengan cepat; Vue mempunyai keluk pembelajaran yang curam tetapi membantu membina aplikasi berskala dan mudah diselenggara. Bergantung pada keperluan projek dan tahap kemahiran pembangun, rangka kerja yang sesuai boleh dipilih.
Apakah bahasa kerangka layui?
Apr 04, 2024 am 04:39 AM
Rangka kerja layui ialah rangka kerja bahagian hadapan berasaskan JavaScript yang menyediakan satu set komponen dan alatan UI yang mudah digunakan untuk membantu pembangun membina aplikasi web responsif dengan cepat. Ciri-cirinya termasuk: modular, ringan, responsif dan mempunyai dokumentasi lengkap dan sokongan komuniti. layui digunakan secara meluas dalam pembangunan sistem backend pengurusan, laman web e-dagang, dan aplikasi mudah alih. Kelebihannya ialah permulaan yang cepat, kecekapan yang dipertingkatkan, dan penyelenggaraan yang mudah Kelemahannya ialah penyesuaian yang lemah dan kemas kini teknologi yang perlahan.
Apakah maksud layui?
Apr 04, 2024 am 04:33 AM
layui ialah rangka kerja UI bahagian hadapan yang menyediakan pelbagai komponen, alatan dan fungsi UI untuk membantu pembangun membina aplikasi web moden, responsif dan interaktif dengan cepat penyesuaian. Ia digunakan secara meluas dalam pembangunan pelbagai aplikasi web, termasuk sistem pengurusan, platform e-dagang, sistem pengurusan kandungan, rangkaian sosial dan aplikasi mudah alih.
Apakah teknologi berasaskan layui?
Apr 28, 2024 pm 09:48 PM
Layui berdasarkan teknologi HTML, CSS, JavaScript, jQuery, Less dan Grunt serta menawarkan keserasian merentas pelayar, kebolehsesuaian tinggi, kemudahan penggunaan, komponen yang kaya dan sokongan komuniti yang aktif.
