jQuery Tablesorter 插件 - 如何在离开页面时保存状态

发布于 2025-01-06 09:51:33 字数 1139 浏览 0 评论 0原文

我正在使用 jQuery Tablesorter 插件,它工作正常。然而有一个问题。想象一下,您有一些排序顺序,但您希望保留该页面并很快返回。不幸的是,当你回来时,你会得到最初的排序顺序,这是完全错误的。所以我试图找到一个线索,如何将 Tablesorter 的状态(记住离开页面时的排序选择)保存在某个变量中,并使用 php 中的 _GET 通过 URL 传递它。任何想法和帮助将不胜感激。

我做了一些研究并发现了以下内容:
1.您可以读取当前的排序列表

     <script>
    $(window).unload( function () {   
    var sortList;  
    $(table).tablesorter().bind("sortEnd", function(sorter)   
    {      
        sortList = sorter.target.config.sortList;  
        $_GET['sortList'] = sortList;  
    });   
    }  
    );
    </script>

2.我尝试像上面那样保存排序列表并在页面加载时读取它:

<script>  
$(document).ready(function()   
    {   
        sortList=$_GET['sortList'];  
        $.tablesorter.defaults.widgets = ['zebra'];   
        $.tablesorter.defaults.sortList = [[1,0]];   
        $("table").tablesorter();   
    }   
);      
</script>
  1. 不起作用,我认为这两行有问题:

    sortList=$_GET['sortList']; ... $_GET['sortList'] = sortList;

我在这里将 JavaScript 语言与 PHP 和数据类型混合在一起。但我不是专业程序员,我无法将这些点联系起来。有什么帮助吗?

亚历克斯

I'm using jQuery Tablesorter plugin, it works fine. However there is a problem. Imagine that you have some sorting order, but you want to live the page and come back shortly. Unfortunately when you come back you will get the initial sorting order which is simply wrong. So I was trying to find a clue how to save the state of Tablesorter (remember the sorting choice when leaving the page) in some variable and pass it via URL using _GET in php. Any ideas and help will be appreciated.

I did a little research and found out the following:
1.You can read the current sortlis

     <script>
    $(window).unload( function () {   
    var sortList;  
    $(table).tablesorter().bind("sortEnd", function(sorter)   
    {      
        sortList = sorter.target.config.sortList;  
        $_GET['sortList'] = sortList;  
    });   
    }  
    );
    </script>

2.I've tried to save the sortlist like above and read it when page loads:

<script>  
$(document).ready(function()   
    {   
        sortList=$_GET['sortList'];  
        $.tablesorter.defaults.widgets = ['zebra'];   
        $.tablesorter.defaults.sortList = [[1,0]];   
        $("table").tablesorter();   
    }   
);      
</script>
  1. Doesn't work, I think these 2 lines are questionable:

    sortList=$_GET['sortList'];
    ...
    $_GET['sortList'] = sortList;

I'm mixing here languages JavaScript with PHP and data types. But I'm not a professional programmer and I can't connect the dots. Any help?

Alex

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

薔薇婲 2025-01-13 09:51:33

我在 github 上有一个 tablesorter 插件的分支,我编写了一个名为“saveSort”的小部件( demo) 将最后一次排序存储到 localStorage 如果浏览器有 HTML5 或 cookie 作为后备。

I have a fork of the tablesorter plugin on github and I wrote a widget called "saveSort" (demo) which stores the last sort into localStorage if the browser has HTML5 or into a cookie as a fallback.

愛放△進行李 2025-01-13 09:51:33

尝试使用此库 jQuery Address 在使用 window.location.hash 对象的解决方案中工作。我目前正在一个项目中使用它并且工作正常。

try this library jQuery Address to work in a solution using the window.location.hash object. I'm currently using it in a project and works fine.

草莓酥 2025-01-13 09:51:33

根据您对页面进行编码的方式,某些浏览器会自动记住最后的状态。但很可能不会,尤其是在较旧的浏览器上。

一个基本的跨浏览器解决方案是将状态信息存储在 window.location.hash 对象中。换句话说,对于您想要记住的任何事件或状态,您可以将哈希更改为唯一标识符:

window.location.hash = 'column1'

这会将 #clicked-button 添加到您的 URL 末尾。当用户对表进行排序时,您可能需要调用它。但仅此一点并不能起到任何作用。第二步是监听哈希值的变化。 IE 有一个 onhashchange 事件,但我认为其他浏览器不支持该事件。另一种方法是设置手动收听的时间间隔。

var last_hash = '';
setInterval(function()
{
    if(window.location.hash != last_hash)
    {
        //a new event happened, change the state of the page
        last_hash = window.location.hash;

        if(last_hash == 'column1')
        {
            //sort based on column1
        }
        else if(last_hash == 'column2')
        {
            //sort based on column2
        }
        //etc
    }
}, 500);

即使用户离开页面然后返回,这样的脚本也会继续运行。

您还可以阅读这些内容以获取有关其他技术的更多信息。

Depending on how you coded the page, some browsers will automatically remember what the last state was. More than likely though, it will not, especially on older browsers.

A basic, cross browser solution is to store the state information in the window.location.hash object. In other words, for any event or state that you want to remember, you change the hash to a unique identifier:

window.location.hash = 'column1'

This adds #clicked-button to the end of your URL. You would want to call this when the user sorts the table. That alone won't do anything though. The second step is to listen for changes to the hash. IE has a onhashchange event but I dont think other browsers support that event. The alternative is to set up an interval to listen manually.

var last_hash = '';
setInterval(function()
{
    if(window.location.hash != last_hash)
    {
        //a new event happened, change the state of the page
        last_hash = window.location.hash;

        if(last_hash == 'column1')
        {
            //sort based on column1
        }
        else if(last_hash == 'column2')
        {
            //sort based on column2
        }
        //etc
    }
}, 500);

A script like this will continue to run even when a user navigates away from the page and then comes back.

You can also read these for more info on other techniques.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文