tablesorterPager 插件:如何与其他控件集成 [英] tablesorterPager plug in: how to integrate with other controls

问题描述

使用带有tablesorterPager 插件的tableSorter 2.0.5 版.我正在使用ajax 加载表行(使用文档中的初始配置，对ajax URL 稍作更改以满足我的需要).一切正常.

Using v 2.0.5 of tableSorter with the tablesorterPager plug in. I'm loading table rows with ajax (using the initial config found in the documentation, with minor changes to the ajax URL to suit my needs). Everything works great.

我想做的是将tablesorterPager的过滤功能与其他HTML控件集成.具体来说，我的应用程序处理工作订单.订单的状态可能是打开"或关闭".我想使用单选按钮集(或选择，或其他)来允许用户在打开、关闭、任意"之间进行选择，并在进行选择时刷新页面，并且我想保留任何过滤/对用户在表格显示中所做的排序.

What I would like to do is to integrate the filter functions of the tablesorterPager with other HTML controls. Specifically, my application deals with work orders. An order's status may be "open" or "closed". I would like to use a radio button set (or select, or whatever) to allow the user to choose between "Open, Closed, Any" and have the page refresh when a selection is made, AND I would like to preserve any filtering / sorting the user has done in the table display.

例如，假设用户在表格列之一的过滤框中键入世界foo"并选择按日期排序.出于本示例的目的，假设状态控制设置为Any".用户决定将结果限制为打开"项目.当他点击更改控件时，我希望插件发出ajax请求并包含foo"过滤器(来自表格列上的过滤器框)和状态控件上的选择(即打开"), 并保留用户已经选择的排序选项.

For example, assume user types the world "foo" in the filter box of one of the table columns and elects to sort by date. Assume for purposes of this example that the status control is set to "Any". The user decides to limit results to "Open" items. When he clicks to change the control, I would like for the plugin to make the ajax request and include the "foo" filter (from the filter box on the table column) and the selection on the status control (i.e., "open"), and preserve the sorting options already elected by the user.

有人能指出我如何操作/更新 ajax URL 以包含来自其他控件的过滤器选择的正确方向吗?或者是否有其他技术可以实现这一点?

Can someone point me in the right direction for how to manipulate/update the ajax URL to include filter selections from other controls? Or is there some other technique for accomplishing this?

谢谢，唐

推荐答案

感谢 Mottie，感谢您的帮助.根据您的建议，以下是我为解决遇到的问题所做的工作.

Thanks, Mottie, for your assistance. Based on your suggestion, here is what I did to solve the issue I was having.

真的很简单:排序器的customAjaxUrl回调函数可以在AjaxUrl中添加任何你想要的东西，包括页面控件的值.

It's really simple: the customAjaxUrl callback function of the sorter can add anything you want to the AjaxUrl, including the value of controls on the page.

例如，我有一个名为 CustomerID 的输入.我希望包含此值

For example, I have an input called CustomerID. I want this value included

   customAjaxUrl: function (table, url) {

        // manipulate the url string as you desire
        // url += '&currPage=' + window.location.pathname;

         // Append "CustomerID=" to the query string,
         // and use '$("#CustomerID").val()' to obtain
         // the value of the CustomerID selection.

         url += '&CustomerID=' + $("#CustomerID").val(); 

         // trigger a custom event; if you want
         $(table).trigger('changingUrl', url);
         // send the server the current page
         return url;

我可以向查询字符串添加其他项目，从其他控件读取值.

I can add other items to the query string, reading values from other controls.

请注意，您可能想要触发表的更新.例如，在我的项目中，用户有一个复选框控件，用于确定是否包含特定状态的工单.检查时，我希望刷新表，同时保留所有现有过滤器和排序.

Note that you may want to trigger an update of the table. For example, in my project the user has a checkbox control that determines whether to include tickets of a certain status. When it's checked, I want the table to be refreshed, while preserving all existing filters and sorting.

您可以使用 pager 插件的 pagerUpdate 方法执行此操作.我将触发器放在一个函数中，以便它可以作为多个控件的 onclick/onchange 事件处理程序调用:

You can do this with the pagerUpdate method of the pager plugin. I put the trigger inside a function so it can be called as the onclick/onchange event handler for multiple controls:

function doTableReresh(){
  $("#mytable").trigger("pagerUpdate");
}

这篇关于tablesorterPager 插件:如何与其他控件集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！