Introduction to sorting table in layui

Release: 2019-11-23 17:30:02
forward
19545 people have browsed it

Introduction to sorting table in layui

Today let’s talk about table sort. Let me give you a preview, the purpose is to distinguish between front-end sorting and server sorting. The current table paging is actually quite "messy". I believe that many students who have been using it for a while, especially those who do server sorting, will encounter this to some extent. Abnormal situation.

Recommendation: layui tutorial

First look at the effect of the sorting that comes with layui. Chinese sorting by dictionary is not the focus of this discussion. First look at what if There are cases where integers are negative and 0 appears.

Introduction to sorting table in layui Then can we adjust the logic in sort so that the logic of judging negative numbers and 0 is correct? This is actually not the focus of this discussion.

The point is, server sorting. In fact, the sorting of most tables is not just a simple sorting of a single page, but the conditions are passed to the background for sorting by the background. Then the official Generally, it is to monitor sort and then reload, and pass the conditions. These are all ok and the logic is fine.

But what is the actual effect? Because the current table does not distinguish between foreground sorting and server sorting, after receiving the data and then rendering the table, it is determined that there is initSort, then the data will be sorted again and then displayed. This presents a very serious problem!

Obviously the server has sorted it, why do we need to sort it again in js? More seriously, can we ensure that the result of sort is consistent with the result of the background sorting rule? What guarantee is there?

Look at the code below when it monitors reload and then simulates the background to return the data according to the rule of negative numbers

Code:

Introduction to sorting table in layuiEffect

Introduction to sorting table in layuiYou may think that there is no difference from the previous one, but the sorting is still wrong. This is an exception. The place. Take a look at the structure of the data returned by my simulation.

Original data:

Introduction to sorting table in layuiData returned by the simulated interface:

Introduction to sorting table in layuiIt is obvious after this return The display effect does not match the order of the actual data. The reason is as mentioned above. When the background sorting is actually done, the front-end sorting still has to be done when rendering, which is equivalent to superfluous processing. In fact, if we define the data returned by server sorting, it will be the order to be displayed.

You must not use the front-end sorting to sort this logic. Otherwise, what is the meaning of back-end sorting and how to ensure that the logic is consistent with the back-end. If it is consistent, it will be a useless effort at best, but if it cannot be guaranteed to be consistent, this is A big accident.

Solution: Provide users with a configuration item to decide whether to sort by the foreground or by the server. Modify as follows

The original code area that needs to be modified

Introduction to sorting table in layuiThe code of the corresponding area after modification:

The test table is in The configuration of sortType was added when rendering

Introduction to sorting table in layui

Finally, the monitoring of sort

Introduction to sorting table in layui

The final effect

Introduction to sorting table in layui

The complete test code and the The corresponding modification address of table.js: https://pan.baidu.com/s/1OjwwVmjy02wRQ0rT1euLlQ

The above is the detailed content of Introduction to sorting table in layui. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:layui.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!