Rectangle 27 1

It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:

<select class="selectAge tablesorter-filter" data-column="3">
    <option class="reset" value="">Filter by age</option>
    <option>&gt;=25</option>
    <option>&lt;=25</option>
</select>

Here is an updated demo (all I changed was the select and added the blue theme css).

Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch, so there would not be a need to add extra code:

$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );

javascript - Jquery Tablesorter filter and external select box - Stack...

javascript jquery jquery-ui-sortable tablesorter jquery-filter
Rectangle 27 0

jQuery('#top-nav').onePageNav({
scrollSpeed: 1200,
currentClass: 'active',
changeHash: true,
filter: ':not(.external)' // used for external navigation links if any <a class="external" href=""></a>

Hey thanks so much for the reply and help... I went to the flesler link and should I be downloading SerialScroll, or ScrollTo? I'm assuming ScrollTo?

javascript - changing active class in twitter bootstrap to the current...

javascript twitter-bootstrap hyperlink navigation
Rectangle 27 0

I think the easiest solution would be to go ahead and add all default filter inputs. Add an external select and make it update the internal select; then hide the filter row (demo):

<select>
    <option>Show all</option>
    <option>Newest</option>
    <option>Older</option>
</select>
<table class="tablesorter">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th data-placeholder="Show all">Date</th>
        </tr>
    </thead>
    <tbody>
    ...
    </tbody>
</table>
.tablesorter-filter-row {
    display: none;
}
var $table = $('table'),
    today = new Date().getTime();

$('select').change(function () {
    $table
        // target the 4th (zero-based index) filter
        // and update it with the value from the external select
        .find('.tablesorter-filter').eq(3).val( $(this).val() )
        .change();
});

$table.tablesorter({
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_functions: {
            3: {
                "Newest": function (e, n, f, i) {
                    return n >= today;
                },
                "Older": function (e, n, f, i) {
                    return n < today;
                }
            }
        }

    }
});

javascript - jQuery tablesorter external date range filter - Stack Ove...

javascript jquery html asp.net tablesorter
Rectangle 27 0

Try using the customAjaxUrl option. Within that callback code, you can get the currently selected external filter and append it as a string which is sent to your server. Something like this:

To answer your question from the comments, you can try binding to the change event of the external filter, then save that filter value into the table data (if you don't want to use a scoped/global variable). Try something like this:

$('.external-filter').on('change', function(){
    $('table')
        .data('filter_value', $(this).val() )
        .trigger('update');
});

then within the customAjaxUrl function do this:

// modify the url after all processing has been applied
customAjaxUrl: function(table, url) {
    // get current selection & add it to the url
    return url += '&filter=' + $(table).data('filter_value');
}

Thanks Mottie, but when a dropdown value is selected in the external filter, it doesn't trigger a tablesorter ajax call since it's outside the table. How do I get the external dropdown to trigger the ajax call?

Try triggering an update on the table $('table').trigger('update'); or maybe even use the pager pageSet or pageSize methods.

Used update and works like a charm - thanks Mottie!

Okay - using update but when I get to customAjaxUrl I can no longer see which external filter triggered the update (I have more than one sometimes) unless I set a global variable. Just checking if there's a way within tablesorter to pass the id of the selector from update to customAjaxUrl. Thanks.

jquery - Using an external filter with tablesorter when using ajax - S...

jquery ajax filtering server-side tablesorter
Rectangle 27 0

jQuery DataTables uses term Orthogonal data which means that the same attribute may contain different values for display, sorting, filtering and type detection.

You can use columns.data option to define which property would be for display and which for filtering/sorting. For example:

"columns": [
    "data": {
        "_": "phone",
        "filter": "phone_filter",
        "display": "phone_display"
    }
]

It means that data property phone_filter is used for searching, phone_display for display and phone for all other purposes (type detection, ordering).

javascript - jQuery DataTables filtering by external properties - Stac...

javascript jquery backbone.js datatables
Rectangle 27 0

Just as an addition to Gyrocode.com's answer. It is possible to use data-* attributes like this:

<td data-search="YourBackboneModelField">human-readable text</td>

javascript - jQuery DataTables filtering by external properties - Stac...

javascript jquery backbone.js datatables
Rectangle 27 0

The json on your fiddle is broken, so is parsed as text, and the second one you should parse as json the result, if you dont on the call, you should do on the succes

console.log(items)
   var itemsJSON= JSON.parse(items)

Filtering objects from external array to create a list, using jQuery A...

jquery arrays ajax json
Rectangle 27 0

Actually there was a bug in the last update which has been fixed and is currently only available within the working branch (patch).

// line 1143 - 1144 of jquery.tablesorter.widgets.js
ffxn = wo.filter_columnFilters ? 
    c.$filters.add(c.$externalFilters).filter('[data-column="'+ columnIndex + '"]').find('select option:selected').attr('data-function-name') || '' : '';

Here is an updated demo using the working branch code.

I'll push an update today to get this fix into the master. Sorry about that.

Master branch updated. The demo from your question is working now.

javascript - Jquery tablesorter: Select for external filter instead of...

javascript jquery tablesorter
Rectangle 27 0

It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:

<select class="selectAge tablesorter-filter" data-column="3">
    <option class="reset" value="">Filter by age</option>
    <option>&gt;=25</option>
    <option>&lt;=25</option>
</select>

Here is an updated demo (all I changed was the select and added the blue theme css).

Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch, so there would not be a need to add extra code:

$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );

javascript - Jquery Tablesorter filter and external select box - Stack...

javascript jquery sortable tablesorter jquery-filter
Rectangle 27 0

You have to add

"bUseColVis": true,
$('#example').dataTable({          
                "aoColumns": [                              
                    /* Region JUST FOR EXTERNAL FILTER*/ { "bVisible":false},                       
                    /* Babys */    null         
                    ],                  
            });                 

        $('#example').dataTable().columnFilter({            
                     sPlaceHolder: "head:before",
                    //ADD IT HERE
                    "bUseColVis": true,
                    aoColumns:[
                    { sSelector: "#regionFilter", type: "select"  },
                                        ]}
                    );

javascript - jQuery Datatables Columnfilter - external filter is not w...

javascript jquery jquery-datatables
Rectangle 27 0

.columnFilter({
                sPlaceHolder: "head:before",
                aoColumns: [
                    { sSelector: "#filter #column1" }
                ]

jquery - datatables.columnfilter plugin filter from External Form - St...

jquery datatables
Rectangle 27 0

Try using the customAjaxUrl option. Within that callback code, you can get the currently selected external filter and append it as a string which is sent to your server. Something like this:

To answer your question from the comments, you can try binding to the change event of the external filter, then save that filter value into the table data (if you don't want to use a scoped/global variable). Try something like this:

$('.external-filter').on('change', function(){
    $('table')
        .data('filter_value', $(this).val() )
        .trigger('update');
});

then within the customAjaxUrl function do this:

// modify the url after all processing has been applied
customAjaxUrl: function(table, url) {
    // get current selection & add it to the url
    return url += '&filter=' + $(table).data('filter_value');
}

Thanks Mottie, but when a dropdown value is selected in the external filter, it doesn't trigger a tablesorter ajax call since it's outside the table. How do I get the external dropdown to trigger the ajax call?

Try triggering an update on the table $('table').trigger('update'); or maybe even use the pager pageSet or pageSize methods.

Used update and works like a charm - thanks Mottie!

Okay - using update but when I get to customAjaxUrl I can no longer see which external filter triggered the update (I have more than one sometimes) unless I set a global variable. Just checking if there's a way within tablesorter to pass the id of the selector from update to customAjaxUrl. Thanks.

jquery - Using an external filter with tablesorter when using ajax - S...

jquery ajax filtering server-side tablesorter
Rectangle 27 0

Managed to solved it by using jquery and .ajax by passing the selected row content .change with post into external php where then i queried the db using it as a filter and while populating the 2nd combobox.

php, mysql, jquery, form element chain select - Stack Overflow

php jquery html mysql chaining