Chaining yadcf multi_select filters together - yadcf

Is there a way to chain filters together where by filters applied in one column will pre-filter the available filters in other columns? Primarily I'm interested in this from a multi_select standpoint, but it could be universal to all filters types I guess.
For example:
Column 1's data contains:
Oklahoma
Missouri
Utah
Texas
Kansas
Column 2's data contains:
Obama
Romney
From the dataset I know that all Column 1 data that has 'Oklahoma' will always mean that Column 2 will equal 'Romney'. Thus, if I select 'Oklahoma' from a mutli_select, then the drop down for the multi_select for Column 2 should now only show 'Romney'.
Basically, can I pre-filter my filters based on other filters already put in place?

I think you are asking about the cumulative_filtering: true option of yadcf,
See the showcase page and here a code sample:
$(document).ready(function () {
'use strict';
var oTable;
oTable = $('#example').DataTable();
yadcf.init(oTable,
[
{
column_number : 0,
filter_type: "multi_select",
select_type: 'select2'
},
{
column_number: 3,
filter_type: "auto_complete",
text_data_delimiter: ","
},
{
column_number : 4,
filter_type: "multi_select",
select_type: 'select2',
column_data_type: "html",
html_data_type: "text",
filter_default_label: "Select tag"
}
],
{
cumulative_filtering: true
}
);
});
As you see the cumulative_filtering: true is an object property, an object that that is a third argument of the init function, when using the .yadcf([{...}]) api you should pass that object as a second arument to the .yadcf constractor, like this:
.yadcf([{...}], {cumulative_filtering: true})

Related

yadcf - multi_select with select2 - options dropdown not case sensitive

Will be posible, in yadcf multi_select filter, sort possible option with case insensibility?
Here is my fiddle to explain this.
In column STATUS are 4 possible values: "abs", "off", "OFF" and "ON". In dropdown the options appears in this order: "OFF", "ON", "abs", "off". And my desire is the options appears in this order: "abs", "OFF", "off", "ON".
Thanks in advance one more time.
You can provide you own custom sort function, , use the following attributes for the column sort_as: 'custom', sort_as_custom_func: mySort (where mySort is a sorting function, like this
'use strict';
var oTable = $('#example').DataTable();
var mySort = function(a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
};
yadcf.init(oTable, [
{
column_number: 0,
filter_type: 'multi_select',
filter_match_mode: 'exact',
select_type: 'select2',
sort_as: 'custom',
sort_as_custom_func: mySort
},{
column_number: 1,
filter_type: 'text',
}
]);
working jsfiddle

Is possible to filter blank fields on multi_select?

I want to know if its possible to get the rows with empty fields on this columns. I have a fiddle to explain this.
At first column (Status) I have three values (ON, OFF, (EMPTY)). My problem is to get the rows with empty values (Same row as PR00000003, PR00000005) selecting empty value on the filter.
Thanks in advance.
Since there seems to be some sort of issue with yadcf/select2 and empty string for filtering I can suggest the following solutions:
1) Use regex (see this jsfiddle) -
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
filter_type: 'multi_select',
append_data_to_table_data: 'before',
data: [ {value:'^$', label:'Empty' }],
filter_match_mode: 'regex',
select_type: 'select2'
}]);
2) Use datatables HTML5 data-* attributes ,
3) Use Chosen plugin (IMO Select2 fits datatables/yadcf better) instead of select2
see jsfiddle sample
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
filter_type: 'multi_select',
append_data_to_table_data: 'before',
data: [ {value:' ', label:'Empty' }],
filter_match_mode: 'exact',
select_type: 'chosen'
}]);
always bet on yadcf

Trying to create a yadcf filter for a column with images

I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here

Choose column to sort in Datatables

I am using the table plug-in for jQuery (datatables) and want to specify witch colum to sort.
table example:
Name | email | year
My table code so far:
$('#table_id').dataTable({
"stateSave": true,
"aoColumnDefs": [{
'bSortable': false
}],
"oLanguage": {
"oPaginate": {
"sPrevious": "",
"sNext": ""
}
},
"iDisplayLength": 15,
"aLengthMenu": [
[15, 20, 25, -1],
[15, 20, 25, "All"]
],
"responsive": true
});
For the moment it sorts by the name of customer, alltough my sql sorts by year.
How can i overide this in datatable?
SOLUTION
Use order option to set initial order for the table.
$('#example').DataTable({
"order": [ 1, 'asc' ]
});
where 1 is the zero-based index of the column to sort. Use asc for ascending sorting and desc for descending sorting.
DEMO
See this jsFiddle for code and demonstration.
i think this will help you
$(document).ready(function()
{
var oTable = $('#myTable').dataTable();
// Sort immediately with column 2 (at position 1 in the array (base 0). More could be sorted with additional array elements
oTable.fnSort( [ [1,'asc'] ] );
// And to sort another column descending (at position 2 in the array (base 0).
oTable.fnSort( [ [2,'desc'] ] );
} );

Dojo DGrid RQL Search

I am working with a dgrid where I want to find a search term in my grid on two columns.
For instance, I want to see if the scientific name and commonName columns contain the string "Aca" (I want my search to be case insensitive)
My Grid definition:
var CustomGrid = declare([Grid, Pagination ]);
var gridStore = new Memory({ idProperty: 'tsn', data: null });
gridStore.queryEngine = rql.query;
grid = new CustomGrid({
store: gridStore,
columns:
[
{ field: "tsn", label: "TSN #"},
{ field: "scientificName", label: "Scientific Name"},
{ field: "commonName", label: "Common Name",},
],
autoHeight: 'true',
firstLastArrows: 'true',
pageSizeOptions: [50, 100],
}, id);
With the built in query language (I think simple query language), I was able to find the term in one column or the other, but I couldn't do a complex search that would return results for both columns.
grid.set("query", { scientificName : new RegExp(speciesKeyword, "i") });
grid.refresh()
I started reading and I think RQL can solve this problem, however, I am struggling with the syntax.
I have been looking at these pages:
http://rql-engine.eu01.aws.af.cm/
https://github.com/kriszyp/rql
And I am able to understand basic queries, however the "contains" syntax eludes me.
For instance if I had this simple data set and wanted to find the entries with scientific and common names that contain the string "Aca" I would think my contains query would look like this:
contains(scientificName,string:aca)
However, this results in no matches.
[
{
"tsn": 1,
"scientificName": "Acalypha ostryifolia",
"commonName": "Rough-pod Copperleaf",
},
{
"tsn": 2,
"scientificName": "Aegalius acadicus",
"commonName": "Northern Saw-whet Owl",
},
{
"tsn": 3,
"scientificName": "Portulaca pilosa",
"commonName": "2012-02-01",
},
{
"tsn": 4,
"scientificName": "Accipiter striatus",
"commonName": "Kiss-me-quick",
},
{
"tsn": 5,
"scientificName": "Acorus americanus",
"commonName": "American Sweetflag",
}
]
Can someone guide me in how to formulate the correct syntax? Thank you.
From what I'm briefly reading, it appears that:
contains was replaced by any and all
these are meant for array comparisons, not string comparisons
I'm not sure offhand whether RegExps can just be handed to other operations e.g. eq.
With dojo/store/Memory, you can also pass a query function which will allow you to do whatever you want, so if you wanted to compare for a match in one field or the other you could do something like this:
grid.set('query', function (item) {
var scientificRx = new RegExp(speciesKeyword, 'i');
var commonRx = new RegExp(...);
return scientificRx.test(item.scientificName) || commonRx.test(item.commonName);
});
Of course, if you want to filter only items that match both, you can do that with simple object syntax:
grid.set('query', {
scientificName: scientificRx,
commonName: commonRx
});