I'm using jQuery isotope. Everything is ok but I have problem with filtering. I want to use multiple categories I have 5 checkboxes and I can't use them at the same time. What can I do?
$("#classic").click(function() {
if($("#classic").is(":checked")) {
$('#box').isotope({ filter: '.classic' });
} else {
$('#box').isotope({ filter: '' });
}
});
Example
my items = a,b,c,d,e,f,g,h
categories = x ( a,b,e) y (c,h) z(d,f,g)
now if I choose the x and z checkbox it only show the a,b,e,d,f,g
but I can't do that. How can I do ?
Here is a solution for checkbox filtering:
http://jsfiddle.net/3nY9V/6/
Looks like you have a js error in the code(missing single quote) and also at one place classic is used as an id and at another place as a class. Just wanted to find if thats not the issue. Try this.
function checkIsoTope(){
var ids = [];
$("#classic, #den, #wer").filter(":checked").each(function(){
ids.push("." + this.id);
});
$('#box').isotope({ filter: ids.join(',')});
}
$("#classic, #den, #wer, #allCheckboxId").click(checkIsoTope);
Related
Background: There's a table from which I can choose employees. I want to filter these employees by name.(I know name is not a good way to filter, this is just an example)
Basically I have a drop down from which I choose one of the filters.
My declaration: $scope.filters = null;.
I also have this deceleration to choose my filter $scope.chosenFilter= null;.
I use the following to retrieve the different filters I have $scope.filters = retrieveFilters(info.Names);
retrieveFilters looks like the following:
var retrieveFilters = function(rows) {
var filterWrapper = document.querySelector(".filterWrapper");
var datasetOptions = [];
$scope.predicate = 'Name';
if (rows) {
//Add Default option
datasetOptions.push({
name: $scope.data.Fnames.defaultFilterOptionLabel,
value: ''
});
$scope.chosenFilter = datasetOptions[0];
_.forEach(rows, function(ele) {
datasetOptions.push({
name: ele,
value: ele
});
});
} else {
filterWrapper.style.display = "none";
}
return datasetOptions;
};
I use the following to choose my filter:
$scope.$watch('chosenFilter', function() {
var filterSearchInput = document.querySelector(".filterWrapper input");
ng.element(filterSearchInput).triggerHandler('input');
});
Everything is fine and the display works on first load as I have set the default with
//Add Default option
datasetOptions.push({
name: $scope.data.Fnames.defaultFilterOptionLabel,
value: ''
});
From the default table whenever I click on an employees name hes details are displayed. However whenever I filter and click on the employees name, nothing is displayed. Whenever I click on a specific employees name at the default table and then filter in the same name the information also shows up, as I cache it each time.
I assume that you're displaying this data somewhere in your GUI using ng-repeat. Angular has a lot of great built-in features for this. Check out the answer here: AngularJS custom search data by writing custom filter for a way to approach this more from an Angular direction. You also might want to check out this question and answer: "Thinking in AngularJS" if I have a jQuery background?.
When using Chosen.js on a multiple select field, if there are over 500 options that the user has selected, the list just becomes ridiculously long.
Is there any way I could limit the number of show elements? For example when chosing over 3 options, the user will have (4) options are selected..., instead of them being listed.
I wonder why there's no such option in their documentation.
Thanks in advance.
You can use something like this:
$('.element').chosen().change(function() {
var totalSelected = $(this).find('option:selected').size();
var placeholder = $(this).find('option:first-child').text();
if(totalSelected > 3) {
$(this).next().find('.chosen-choices').find('li.search-choice').hide(),
$(this).next().find('.chosen-choices').find('.literal-multiple').show();
$(this).next().find('.chosen-choices').find('span.literal-multiple').text(placeholder + " ("+totalSelected+")");
}
});
The class literal-multiple is a custom element to show the totalSelected elements. You need to add it in the prototype of the chosen plugin:
file chosen.jquery.js
Chosen.prototype.set_up_html = function() {
//stuff
if(this.is_multiple) {
var selVal = this.default_text;
this.container.html('<ul class="chosen-choices"><span class="literal-multiple"></span></ul>');
}
};
SOrry I am unable to comment since I don't have enough reputation.
But to add to the previous answer, instead of adding a separate container,
why don't we just append the n users selected as a <li> item.
Something like this -
$('.element').chosen().change(function() {
var totalSelected = $(this).find('option:selected').size();
var placeholder = $(this).find('option:first-child').text();
if(totalSelected > 3) {
$(this).next().find('.chosen-choices').find('li.search-choice').hide(),
$(this).next().find('.chosen-choices')append('<li class="search-choice" <span>'+totalSelected+' users selected. </li>');
}
});
This seems to work for me.
I d like to be able to hide/display the filters while using tablesorter.
Using table sorter just went fine but when i added a button to execute :
function display_hide_filter() {
var filters = document.getElementsByClassName('tablesorter-filter-row');
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.style.display == 'none') {
filter.style.display='inline';
} else {
filter.style.display='none';
}
}
}
I then get a weird answer. Hiding the filter is fine but re displaying turn into having all filter cells under the first header cell.
Since i got poor english and css/js skills, I just hope I didnt miss something about it in the documentation but i tried to get trough it a thousant times with no success.
Thanks for any help
There is a filter_hideFilters option that minimizes the filter row until the user hovers over it. It is also accessible friendly in that the user can use the tab key gain access the filter inputs (demo).
If you just want to hide/show the filter row, then this basic code would work (demo):
HTML
<button type="button">Toggle Filter Row</button>
Script
$(function () {
$('table').tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'filter']
});
$('button').click(function(){
$('.tablesorter-filter-row').toggle();
});
});
As Andreas pointed out, I used 'inline' where i should have used ''
I have a page with severl jqGrids, but only one is visible at a time. I want a simple function to return which one is visible at any time. Is there some function like this, which would show which divs are visible:
$('div').each(function(){
if($(this).is(':visible')){
alert($(this).attr('id'));
}
});
Is there something like this that can parse through all jqGrids on a page?
Thanks!
You need probably something like the following
$("table.ui-jqgrid-btable:visible").attr('id');
If no grid are on the table you will get undefined value. If more as one grid is visible you will get the id of the first one.
To have array of ids of all visible grids you can use the following code
var ids = $.map($("table.ui-jqgrid-btable:visible"), function(value) {
return value.id;
});
// now we have all ids in the array
alert(ids.join()); // display all as comma-separated
You can make the above code more safe with the test for grid expandos:
var ids = $.map($("table.ui-jqgrid-btable:visible"), function(value) {
if (value.grid) { return value.id; }
});
// now we have all ids in the array
alert(ids.join()); // display all as comma-separated
As far as I have seen, All grids are wrapped with a div class ui-jqgrid. So try something like below,
$('div.ui-jqgrid:visible').each(function () {
alert(this.id); //above would return the gview_<table_id> or gbox_<table_id> or
//something_<table_id>
alert($(this).find('.ui-jqgrid-btable').attr('id')); //should return table_id
});
The following jQuery function filters my table columns by letter. There is an <a> for each letter. I'm not sure how to add another function though to filter column 1 using a different dropdown on the html side.
JavaScript:
function fil(rexp)
{
$('#tablestyle').dataTable().fnFilter(rexp, 0, true, false);
}
HTML:
<div style="float:left;" class="sortalpha">
ALL
| A
| B
<!-- [...] -->
| Z
</div>
What I have tried to do is copy the top part and change fil to fil2 then copy the HTML part and change those to fil2. Is that the correct way?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Just to give everyone a bit more info, I am using datatables {www.datatables.net} which is a jquery script that presents tables in a nice looking ui with various differnt functions to it like search, filter records per page etc.
I have implemented this mod that someone has listed here >> http://www.datatables.net/forums/discussion/6641/filtering-with-first-letter/p1
It works fine and when I select each letter it filters column 0 using whatever letter I have clicked on. What I am trying to do is have two different filters, one to filter column 0 which is the name of the person, and also another filter that does exaclty the same thing, but for column 1 which is business name, I just wasnt sure how to add the same piece of code twice?.
I don't really know your context, but I would suggest you try using event handlers instead of JavaScript URLs.
So instead of this:
ALL
You could do this:
$('.sortalpha a').on('click', function() {
fil('');
});
Of course, this would make all links filter on ''. To fix that, you could get the text from the <a> that was clicked and use that to call fil(), like so:
function fil(rexp) {
if (rexp.length > 0) {
rexp = '^' + rexp;
}
//$('#tablestyle').dataTable().fnFilter(rexp, 0, true, false);
alert('Filter on: "' + rexp + '"');
}
$('.sortalpha a').on('click', function(event) {
var letter = $(this).text().toLowerCase();
if (letter === 'all') {
fil('');
} else {
fil(letter);
}
});
Here's a working example: http://jsfiddle.net/uzGat/2/
Edit: I updated the answer to account for capital letter and the ^ in the regular expressions.
if the plugin is well written, it must maintain chainbilty so you can do like:
function fil(rexp)
{
$('#tablestyle').dataTable().fnFilter(rexp, 0, true, false).fnFilter(rexp2, 0, true, false);
}