Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

filter_startsWith and AJAX #526

Closed
MrTobyDog opened this issue Mar 4, 2014 · 4 comments
Closed

filter_startsWith and AJAX #526

MrTobyDog opened this issue Mar 4, 2014 · 4 comments

Comments

@MrTobyDog
Copy link

Is there any way to provide this functionality if using pager and retrieving info with AJAX?
Basically I would like to be able to modify my MySQL search to be one of:
LIKE 'text%'
LIKE '%text'
LIKE '$text%'
depending on a flag the user sets. Of course I can ask the user to type in the search text like that, but is is not very intuitive!

@Mottie
Copy link
Owner

Mottie commented Mar 4, 2014

Try something like this (demo):

$(function () {
    var endsWith = false;

    $("table")
    .tablesorter({
        theme: 'blue',
        widgets: ['filter'],
        widgetOptions: {
            filter_startsWith: false,
            filter_hideEmpty: false
        }
    })
    .tablesorterPager({
        // leave off {filterList:fcol} from ajaxUrl
        ajaxUrl: "data?page={page}&size={size}&{sortList:col}",
        ajaxProcessing: function (ajax) {
            // do something with the ajax
            return ['', 0];
        },
        // modify the url after all processing has been applied
        customAjaxUrl: function (table, url) {
            var c = table.config,
            wo = c.widgetOptions,
            sql = {filter:[]},
            filters = $(table).data('lastSearch') || [];
            $.each(filters, function (i, v) {
                v = v || '';
                sql.filter[i] = wo.filter_startsWith ? v + '%' :
                endsWith ? '%' + v :
                v;
            });
            // send the server the current page
            return url + '&' + $.param(sql);
        }
    });

    /* DEMO STUFF */
    $('input[type=radio]').on('change', function(){
        var c = $('table')[0].config;
        c.widgetOptions.filter_startsWith = $('.startsWith').prop('checked');
        endsWith = $('.endsWith').prop('checked');

        // remove the next line if you don't want the radio
        // button to automatically update the ajax url
        c.pager.last.page = c.pager.page + 1;

        c.$table.trigger('update');
    });

});

Basically this is how it is done:

  • Leave off the {filterList:fcol} from the ajaxUrl option.
  • Add a customAjaxUrl option to modify the filters as desired. In the demo I added a set of radio buttons to allow the user to choose.
  • In the demo code at the bottom, you can have the filters automatically update when the user changes the radio button by modifying one of the saved variables to force a new update. I used c.pager.last.page above. Trigger an "update" on the table to force a new search.

@MrTobyDog
Copy link
Author

Great - looks just what I need.....

On 4 March 2014 15:16, Rob G notifications@github.com wrote:

Try something like this (demo http://jsfiddle.net/4mVfu/2063/):

$(function () {
var endsWith = false;

$("table")
.tablesorter({
    theme: 'blue',
    widgets: ['filter'],
    widgetOptions: {
        filter_startsWith: false,
        filter_hideEmpty: false
    }
})
.tablesorterPager({
    // leave off {filterList:fcol} from ajaxUrl
    ajaxUrl: "data?page={page}&size={size}&{sortList:col}",
    ajaxProcessing: function (ajax) {
        // do something with the ajax
        return ['', 0];
    },
    // modify the url after all processing has been applied
    customAjaxUrl: function (table, url) {
        var c = table.config,
        wo = c.widgetOptions,
        sql = {filter:[]},
        filters = $(table).data('lastSearch') || [];
        $.each(filters, function (i, v) {
            v = v || '';
            sql.filter[i] = wo.filter_startsWith ? v + '%' :
            endsWith ? '%' + v :
            v;
        });
        // send the server the current page
        return url + '&' + $.param(sql);
    }
});

/* DEMO STUFF */
$('input[type=radio]').on('change', function(){
    var c = $('table')[0].config;
    c.widgetOptions.filter_startsWith = $('.startsWith').prop('checked');
    endsWith = $('.endsWith').prop('checked');

    // remove the next line if you don't want the radio
    // button to automatically update the ajax url
    c.pager.last.page = c.pager.page + 1;

    c.$table.trigger('update');
});

});

Basically this is how it is done:

  • Leave off the {filterList:fcol} from the ajaxUrl option.
  • Add a customAjaxUrl option to modify the filters as desired. In the
    demo I added a set of radio buttons to allow the user to choose.
  • In the demo code at the bottom, you can have the filters
    automatically update when the user changes the radio button by modifying
    one of the saved variables to force a new update. I used
    c.pager.last.page above. Trigger an "update" on the table to force a
    new search.

Reply to this email directly or view it on GitHubhttps://github.com//issues/526#issuecomment-36590740
.

@Mottie
Copy link
Owner

Mottie commented Mar 31, 2014

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.

@Mottie Mottie closed this as completed Mar 31, 2014
@MrTobyDog
Copy link
Author

Thanks - yes it is and apologies for not closing it

On 31 March 2014 22:55, Rob G notifications@github.com wrote:

I'm guessing this issue has been resolved, so I'm going to close it. If
you continue to have problems, please feel free to continue this discussion.

Reply to this email directly or view it on GitHubhttps://github.com//issues/526#issuecomment-39079953
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants