Question

将tableSorter的v 2.0.5与tablesorterPager插件一起使用。我用ajax加载表行（使用文档中的初始配置，对ajax URL进行微小更改以满足我的需要）。一切都很好。

我想要做的是将tablesorterPager的过滤功能与其他HTML控件集成。具体来说，我的应用程序处理工单。订单的状态可能是＆＃34;打开＆＃34;或者＆＃34;关闭＆＃34;。我想使用单选按钮设置（或选择，或其他），以允许用户在打开，关闭，任何＆＃34;之间进行选择。在进行选择时刷新页面，并且我想保留用户在表格显示中完成的任何过滤/排序。

例如，假设用户键入世界＆＃34; foo＆＃34;在其中一个表列的筛选器框中，选择按日期排序。为了这个例子的目的，假设状态控制被设置为＆＃34; Any＆＃34;。用户决定将结果限制为＆＃34; Open＆＃34;项目。当他点击更改控件时，我想让插件发出ajax请求并包含＆＃34; foo＆＃34;过滤（从表格列上的过滤框）和状态控件上的选择（即＆＃34;打开＆＃34;），并保留用户已选择的排序选项。

有人能指出我正确的方向，如何操纵/更新ajax URL以包含其他控件的过滤器选择？还是有其他技术可以实现这个目标吗？

谢谢，唐

Answer 1

有a demo显示如何将寻呼机与自定义寻呼机控件一起使用。实际上，this SO answer显示了如何将寻呼机与另一个第三方分页插件一起使用。

至于向网址添加更多信息，您可以修改传递给jQuery $.ajax电话的ajaxObject（ref）：

ajaxObject: {
  // add ajax settings here
  dataType: 'json',
  data: {
    'Status' : 'all'
  } 
},

或者，使用customAjaxUrl callback function修改网址。

// modify the url after all processing has been applied
customAjaxUrl: function(table, url) {
  return url += '&Status=all';
}

Answer 2

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

这很简单：分拣机的customAjaxUrl回调函数可以向AjaxUrl添加任何你想要的东西，包括页面上控件的值。

例如，我有一个名为CustomerID的输入。我想要包含这个值

   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;

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

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

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

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

tablesorterPager插件：如何与其他控件集成

2 个答案: