tablesorterPager plug in: how to integrate with other controls

问题

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.

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.

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.

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?

Thanks, Don

回答1:

There is a demo showing how to use the pager with custom pager controls. In fact, this SO answer shows how to use the pager with another third-party pagination plugin.

As for adding more information to the url, you can either modify the ajaxObject that is passed to the jQuery $.ajax call (ref):

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

Or, modify the URL using the customAjaxUrl callback function.

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

回答2:

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

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.

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.

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");
}

来源：https://stackoverflow.com/questions/33482544/tablesorterpager-plug-in-how-to-integrate-with-other-controls

标签

jquery

tablesorter