As shown in the title, there is a top button after each line. Click to stick to the top. Since there is a settimeout to self-refresh and re-obtain the data, the top position cannot be maintained. There will be no effect after each refresh.
Code:
$(".top").click(function(){
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$("tbody").prepend($tr);
$(this).css({"color":"red","font-weight":"bold"});
});
In fact, this part of the code has no effect on solving the problem. I mainly want to know how to interact with the background or affect global variables in the foreground, so as to maintain the current top position
You have to check whether your pin is permanent or temporary!
If it is permanently pinned, then your data must be stored in the database, and there is a field to identify whether the data is pinned. When binding to the front end, this data can be judged by the identifier. Whether to pin it to the top or not, there is no need for the front-end to consider this issue at all, right? You just display this part of the data on the front-end.
If your pin is only temporary, you can get a certain column of data in the pin data row as an identifier before each request for ajax data (this is up to you, but the value of this column must be unique) , and then request ajax data. When binding, use the identifier you stored and the requested data to judge. If they are equal, set the redirected data to the top. (I feel like there’s not much point in writing this kind of pin, because only you can see this kind of pin data. It’s useless if you close the page. It’s not permanent after all)
Directly ask your backend to write an interface. When you click on the pin, pass the ID of this data to the backend, and then let the backend queue it to the first piece of data and return it to you, so that even if there is a settimeout, what you receive will be the same. The data after you pinned it