vedmack / yadcf Goto Github PK
View Code? Open in Web Editor NEWYet Another DataTables Column Filter (yadcf)
Home Page: http://yadcf-showcase.appspot.com/
License: MIT License
Yet Another DataTables Column Filter (yadcf)
Home Page: http://yadcf-showcase.appspot.com/
License: MIT License
Hi guys,
When put two options no work selected chosen:
{column_number : 0, filter_match_mode: 'exact', select_type: "chosen"}
but put:
{column_number : 0, select_type: "chosen"} work fine.
Thanks,
Angel.
Filter type range_date isn't working in my Rails app.
This is my code:
$("#DT_forecasts").dataTable(
bfilter: true
iDisplayLength: 10
bLengthChange: true
sScrollY: "400px"
bPaginate: false
oColVis:
buttonText: "Hide/Show"
bRestore: true
sDom: "C<"clear">lfrTtiXp"
oTableTools:
aButtons: [
sExtends: "xls"
sButtonText: "Save Excel"
,
sExtends: "pdf"
sPdfOrientation: "landscape"
sPdfMessage: "pdf"
mColumns: "visible"
sButtonText: "Save PDF"
]
).yadcf [
filter_container_id: "yadcf1"
filter_type: "range_date"
date_format: "dd/mm/yyyy"
column_number: 0
filter_default_label: "Date Range"
,
filter_container_id: "yadcf2"
column_number: 1
filter_default_label: "Schedule"
,
filter_container_id: "yadcf3"
column_number: 2
filter_default_label: "JobPlan"
]
I am using Bootstrap Datepicker in the same Rails app. Is that the problem? If it is, how do I fix it?
Thanks
View the issue here: http://www.dcturano.com/to-do-list/
I'm using jQuery Chosen to turn a <select>
item into an <li>
item that can be styled with CSS.
The issue I'm running into is 2 of the 3 select items I'm trying to turn into lists are turning into lists, the problem is their <option>
s aren't being shown under each respective list. The two select items not showing their options are above the "Office" and "Expeditor" columns, and both items are produced by YADCF. One of the select items is showing its options, and that's the "Show ___ entries" drop-down in the top left of the table. I should mention the 2 items that aren't showing the options are using the YADCF.
Any idea why 2 of the 3 lists aren't showing the options?
The other jQuery plugin I'm using is DataTables. I tried using another jQuery drop-down styler and that was reproducing the same issue for YADCF's filters.
Hi and thanks so much for this fantastic plugin!
I have a feature request, do you think it would be possible to sort/order the data that appears in the dropdowns, either alphabetically or numerically? I have a column showing years and it would be nice to show them either ASC or DESC in the dropdown; same for titles alphabetically.
Thanks again!
Michelle
Please add a new filter type which works exactly the same way as the Search bar on the upper right but would only search for contents on the column it was added.
For example, let's say I have 3 rows on the table and 2 rows has the keyword "red car" in them. If I enter "red" in this new search text box filter, it would show the 2 rows because that column has that keyword (unlike the autocomplete where it would show you those 2 rows but you have to select one).
Hi again !
I think I found a bug in the selection. let's tell that I have 2 similar data in a column :
and I've a dropdown list from what I select the data i want to filter.
If I filter my dropdown list to shows items having in this column the data "test1", it shows also items having in this column the data "test0-test1", probably because it contains also "test1". But the contrary is not true if select "test0-test1" in the list, it's ok and select the good items.
So I think it's a bug.
I've a working example to show you if it's not clear
http://yadcf-showcase.appspot.com/DOM_source.html
Using the demo in IE 8, the initial load is fine. When clicking on any of the column filters, e.g. "Some Data" selector, it renders a Javascript error in IE 8:"The object does not support this property or method'. No other error. The filter will work, it will render a filtered page.However the close-out (x) button does not clear the filter.
I've tried recreating the demo in my own project, using the required scripts, and get the same error only in IE 8. Chrome and Firefox work fine.
I know this is IE 8's problem,and not your script. Unfortunately my company is still on IE 8 and I have to support it. This plug-in would be really helpful to my projects. So if there's a fix for this, would be great.Thanks for your help.
Hi,
I want to change its seach/matching criteria a little bit...
For example if i have "Jumera Lakes Towers" and i type JLT it do not work in this case.
Can we fix it?
Thanks in advance
I have a column were some cells have values and some cells are empty. The filter select shows all the values and the empty selection. However, when I try to filter on the empty selection, all the rows are shown.
I would have expected this to work similar to excel when you are using data filtering, and select only (blanks)
Let me know if you need a jsbin for this. (I wonder if this is underlying datatables problem)
Hey, there are functions to count the number of value in that column after each filter?
For my English language to apologize, I do not know English very well. Perhaps I wrote it understandable :)
Thank you for your prompt reply.
Doesn't seem to work with dataTables sScollY feature:
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false
} );
} );
hi daniel!
thanx for writing "Yet Another DataTables Column Filter".
question: I want to filter (range-slider) a price col with the format:
1'000'000 etc. but the filter function stops to work.
I am not a scripting expert… is there a simple solution
to make this format work?
many thanx!!!
lopezinho
Hi -- first off, great tool!
This ticket is more or less a clone of #13 with some expansion. To start from the beginning, YADCF renders oddly when DataTables' sScrollX/sScrollY is enabled. Modifying the included example.html triggers it right away:
$(document).ready(function(){
$('#example').dataTable({sScrollX: '100%'}).yadcf([
{column_number : 0},
{column_number : 1, filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
{column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
{column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
{column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});
Also give the div 'container' an arbitrary length -- say, 500px. In the result, note how the table renders strangely all around: the table's width isn't accurate (comment out the .yadcf() to compare), column headers display separate from the filter row, the sort arrows render twice, etc.
Everything above applies to sScrollY too.
The previous ticket #13 claimed to have a workaround, but I just got an alert() error from YADCF when I tried it.
Your predecessor had it http://jquery-datatables-column-filter.googlecode.com/
Btw great plugin !!!
DataTable's defaulting sorting function is missing after implementing yadcf
Current version of Chrome (33.0.1750.146) is experiencing the following issue:
-When 'select' filter has no selected option (default), Editor's lightbox div "DTED_Lightbox_Background" isn't fading in or out of opaque dark background (in fact there is no background at all)
-When 'select' filter has a selected option, Editor's lightbox div "DTED_Lightbox_Background" IS fading in and out of opaque dark background
This issue isn't occuring in Firefox 27.0.1.
Hello !
First, thanks for the plugin, it's a great help for me :)
I would like to know how could I pass a parameter that would select the correct data in the table.
Example : I have a datatable with different products, and each product has a category (it's a column of the table). For the moment, the user choose his category from a dropdown list and the table shows only the products of that particular category thanks to your plugin.
Now, I would like to have the same effect, when I click from an external html page, to this specific category link. So I click on the category link, and I fall on the datatable already filtered on that category (so the category is already selected in the dropdown list).
Sorry for my bad english, but I hope you understood my question :)
Thanks a lot !
Hi Daniel, kindly add this feature as it would be incredibly helpful.
Hi,
I have a column on my table which contains HTML but contains numeric value as its text. I sort it as "num" but its not being sorted numerically. For example, if I have the ff numbers: 12, 8, 7, 0, 0, it would sort it like this:
8,7,12,0,0
which is of course wrong.
I'm using the ff options:
{
column_number: 3,
column_data_type: "html",
filter_type: "range_number_slider",
sort_as: "num",
sort_order: "desc"
},
Please help.
Thanks,
Paolo.
Based on forum discussion, I think someone else was going to write this issue. However, I'd just found DataTables and decided to use the later version, and would like to use this plug-in as well.
yadcf accesses column data by means of the column_number. If the dataTables option "mData" (1) is used, it may select the wrong data column.
Attached is a small patch to make it work.
diff -hu jquery.dataTables.yadcf.js.bak jquery.dataTables.yadcf.js
--- jquery.dataTables.yadcf.js.bak 2013-12-09 07:56:31.000000000 +0100
+++ jquery.dataTables.yadcf.js 2013-12-09 09:09:47.197590393 +0100
@@ -602,6 +602,7 @@
data,
filter_container_id,
column_number,
+ column_data,
column_data_type,
html_data_type,
text_data_delimiter,
@@ -646,6 +647,10 @@
data = args[i].data;
filter_container_id = args[i].filter_container_id;
column_number = args[i].column_number;
+ column_data = oTable.fnSettings().aoColumns[column_number].mData;
+ if (! column_data) {
+ column_data = column_number;
+ }
column_data_type = args[i].column_data_type;
html_data_type = args[i].html_data_type;
text_data_delimiter = args[i].text_data_delimiter;
@@ -702,7 +707,7 @@
for (j = 0; j < data_length; j++) {
if (column_data_type === "html") {
- col_inner_elements = $(data[j][column_number]);
+ col_inner_elements = $(data[j][column_data]);
for (k = 0; k < col_inner_elements.length; k++) {
switch (html_data_type) {
case "text":
@@ -722,7 +727,7 @@
}
} else if (column_data_type === "text") {
if (text_data_delimiter !== undefined) {
- col_inner_elements = data[j][column_number].split(text_data_delimiter);
+ col_inner_elements = data[j][column_data].split(text_data_delimiter);
for (k = 0; k < col_inner_elements.length; k++) {
col_inner_data = col_inner_elements[k];
if (!(col_filter_array.hasOwnProperty(col_inner_data))) {
@@ -731,7 +736,7 @@
}
}
} else {
- col_inner_data = data[j][column_number];
+ col_inner_data = data[j][column_data];
if (!(col_filter_array.hasOwnProperty(col_inner_data))) {
col_filter_array[col_inner_data] = col_inner_data;
options.push(col_inner_data);
(1) http://www.datatables.net/release-datatables/examples/ajax/deep.html
When I configure a column using external filter and chosen, thus
{
column_number:nameCol,
filter_container_id:"_rrwebapp_filtername",
filter_type:"multi_select",
select_type: 'chosen',
select_type_options: {
width: 30,
},
filter_reset_button_text: 'all',
}
the width parameter to chosen is ignored.
I think the offending code is
args[i].select_type_options = $.extend({}, {width: $(filter_selector_string).closest("th").width() + "px"}, args[i].select_type_options);
which expects the filter to be in the header.
Side issue -- attempt to disable filter_reset_button_text (=false) left reset button with "false" text, rather than disabling the button.
I would like to have data range filter, i think that it's realy useful for anyone that got date on table. And at the moment, i'm using on DataTables the mRender option to invert the data order from yyyy-mm-dd to dd-mm-yyyy (i'm itailan :)) or to Capitalize the first letter or something like that. Using mRender every filters doesn't work.
I have searched how to make a work around but i'm lost on code.
This is related to issue #16 and is continuation of discussion from http://www.datatables.net/forums/discussion/15016/yet-another-datatables-column-filter-yadcf
Let me describe my use case, and ask a couple of related questions. If you agree this is a useful use case, this might require some changes to the yadcf code.
I want to load a bunch of data which is partitioned by the values in the hidden column. The user never wants to see data from rows containing multiple values at the same time. This is why the column can be hidden.
Having said all this, I still need to test whether the external filter works with bVisible=false at all. Will generate new issue with jsbin if I have any problems.
i have used the yadcf, it good.. but i have one doubt, how to while i drag the slider followed by the values increase or decrease...
how to do that one..
Currently I'm thinking to use on of the following sliders
or
Any thoughts on which one I should use?
Currently exFilterColumn documentation indicates currently support only filter_type : "select"
Please add support for other filter types. In particular I'd like to use auto_complete.
Hey,
Great job, this plugin is awesome.
I have a problem which has taken me a while to solve but without success.
Let's say I have two data texts to filter: "Percorso" and "Non percorso". In my columns, "Non percorso" is usually associated with other texts such as : "Client not available" etc.
I want to filter only based on the two data types, but I can't. If filter_match_mode is set to exact, it won't show me the results about "Non percorso" (since additional dynamic text follows it inside the same column). If I set the filter_match_mode to contains, it will show me the results about both the data texts (the term "percorso" is in both the data texts) . How can I solve this?
One trivial solution would be if you added the case sensitive option, however there may be other better solutions.
Thank you in advance.
Hi,
When we are working from server side it's not working. when i gave data by static it's working. but when i fetch data by using "sAjaxSource". it's not supporting to dat.
Thanks,
Marvan.
I am using the js file in _wip branch of Datatables because the 1.9.4 version seems to have problems with bootstrap 3. I use the http://datatables.net/forums/discussion/comment/53129 suggestion and that has solved my problem as filtering is working properly. Now, yadcf does not seem to work properly. I get this error
TypeError: $.fn.dataTableExt.afnFiltering is undefined
$.fn.dataTableExt.afnFiltering.push(
Also I am not able to get the date format to work. Here is the js code I am using
$(document).on("ready", function(){
$("#pyd_table").dataTable({
"bJQueryUI": true,
"sDom": '<"H"Tfr>t<"F"ip>'
// Disable sorting on the first column
// "aoColumnDefs" : [ {
// 'bSortable' : false,
// 'aTargets' : [ 0 ]
// } ]
// "aaSorting": [1,2,6,8,9]
}).yadcf([
{
column_number: 1
}, {
column_number: 6,
data: ["Yes", "No"],
filter_default_label: "Select Yes/No"
},
{
column_number: 8,
filter_type: "range_date",
date_format: "dd/mm/yy"
},
{
column_number: 9,
filter_type: "range_date",
date_format: "dd/mm/yy"
}
]);
});
Hi,
I set up a yadcf extension for my datatable, rendering of initial table works fine, but when I want to filter something (text filter), I get this error message
TypeError: Cannot read property 'filter_match_mode' of undefined
Extra table settings:
bStateSave: false,
bAutoWidth: false,
bSort: true,
bServerSide: true,
bProcessing: true,
bDestroy: true,
Anyone knows how to fix or if thats a yadcf bug?
Thanks
Filter works fine if you have only "Datatables" bVisible=true columns.
If there are bVisible=false columns included the datasource shown in Filter will be not from the column where the filter element is located.
Example:
var userTable=$('#myDataTables').dataTable({
/* Spalte0 / { "bSearchable": false,
"bVisible": false },
/ Spalte1 / { "bSearchable": false,
"bVisible": false },
/ Spalte2 / null,
/ Spalte3 / null,
/ Spalte4 / null,
/ Spalte5 / null,
/ Spalte6 / null,
/ Spalte7 */ null
]
}).yadcf([
{column_number : 0}, // shows filter in "Spalte2" and uses datasource for filter from "Spalte0"
{column_number : 2} // shows filter in "Spalte4" and uses datasource for filter from "Spalte2"
]) ;
How can a show the datasource from it's own column ?
I am using the following code to generate datatables with yadcf. I am getting the date range filter in the UI(i.e the two boxes to select dates) but when I change the date nothing happens. I have dates in dd/mm/yyyy format so I changed the date format to dd/mm/yyyy as prescribed in the comment of the js file but it also has not changed. Other filters seem to work fine. Any idea why?
$('#custom_order_admin').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "CSV",
"mColumns": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
"sExtends": "pdf",
"sButtonText": "PDF",
"mColumns": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
"sExtends": "xls",
"sButtonText": "XLS",
"mColumns": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
"sExtends": "copy",
"sButtonText": "Copy",
"mColumns": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
]
},
"aaSorting": []
}).yadcf([{
column_number: 0,
filter_type: "range_date",
date_format: "dd/mm/yyyy"
}
]);
Great Tool !!!
It doesn't seem to work with columns containing x-editable.
<td>
<a href="#" class="xeditable" data-type="select" data-pk="1" data-resource="worequest" data-source="/employees" data-name="employee_id" data-url="/worequests/<%= worequest.id %> " data-original-title="Select Type">
<% if worequest.employee_id != nil %>
<%= worequest.employee.employee_full_name %>
<% end %>
</a>
</td>
Good morning,
I have a question.
I'm using your api, and i'm trying to use data value, example select simple yes or no.
But this returning object, don't have in options select yes or no.
I'm using database returning false = no , true = yes.
Please i need help.
Site example:
column_number: 2,
data: [{value: 'Yes', label: 'Yessss :)'}, {value: 'No', label: 'Noooo :('}],
filter_default_label: "Select Yes/No"
Thanks!
... at least I am guessing maybe the spaces are confusing yadcf
See the Division selector at http://jsbin.com/toxem/1/edit?js,output
thanks
Can't get anything to work using
filter_type: "range_number_slider"
along with
column_data_type: "html" (neither text, id or value)
Any hint for me?
I think code should be similar to the following
function exFilterValue(table_arg, column_number) {
var table_selector_jq_friendly;
table_selector_jq_friendly = yadcf.generateTableSelectorJQFriendly(table_arg.selector);
return $("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number).val();
}
});
Hi,
Is it possible to configure a Chosen select to be multiple select instead of the default single-select?
Thanks.
hi vedmack,
i'm was wondering if you could incorporate something similar to: http://lab.narf.pl/jquery-typing/ into yadcf. maybe it's easy enough for me to add the previous into my script myself but it seems the most logical way of incorporating this feature would be to have a variable for each column which specifies the timeout. Default could be "0" to continue to have same behaviour as now.
thanks,
keith
Hello,
I am trying to use the exFilterColumn api call.
When the table has been initialized I have a callback function firing. If the url has a certain parameter key=value control I use exFilterColumn in order to create the view wanted in table.
Everything is firing in order and as intended. However when the case comes up for exFilterColumn to fire nothing happens. I don't even see an error thrown in the console. I am certain that the exFilterColumn should be fired in these situations as an alert is fired succesfully when swapped in for the exFilterColumn call.
I believe that one of two things is happening:
I have assigned the wrong column number in arguments (although it corresponds to the argument value used when initializing yadcf)
I am not using proper syntax in the argument values for the exFilterColumn call so there is no error thrown but the function does not execute anything
Here is the code:
var llTable = $('#ad_table').DataTable( {
"bScrollCollapse": true,
"bPaginate": false,
"bInfo": false,
"sScrollX": "100%",
"sScrollY": "350px",
"sAjaxSource": "data/table-data.txt",
"bDeferRender": true,
"aaSorting": [[ 6, "asc" ]],
"aoColumnDefs": [
{ "sType": "natural", "aTargets": [2,4,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31] },
{ "aDataSort": [ 5, 6 ], "aTargets": [ 5 ] },
{ "aDataSort": [ 3, 6 ], "aTargets": [ 3 ] },
{ "aDataSort": [ 1, 6 ], "aTargets": [ 1 ] },
{ "bSearchable": false, "aTargets": [1,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31] },
{ "bVisible": false, "aTargets": [2,3,5] }
],
"fnInitComplete": function(oSettings, json) {
$(".loading_modal").hide();
tableCallback();
}
}).yadcf([
{column_number : 1, data:["AK","AL","AR","AZ","CA","CO","CT","DC-VA-MD-WV","DE","FL","GA","HI","IA","ID","IL","IN","KS","KY","LA","MA","MD","ME","MI","MN","MO","MS","MT","NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VA","VT","WA","WI","WV","WY"], filter_container_id: "external_filter_container_2", filter_default_label: "Choose State"},
{column_number : 3, filter_container_id: "external_filter_container_1", filter_default_label: "Choose Region"},
{column_number : 5, filter_container_id: "external_filter_container_3", filter_default_label: "Choose City Size"}
]);
var tableCallback = function() {
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
if (hashes.length > 0) {
$.each(hashes, function(index, value){
param = value.split('=');
if (param[0] == "sort") {
switch(param[1]) {
case "recession":
llTable.fnSort( [[9,'asc']]);
break;
case "strength":
llTable.fnSort( [[8,'asc']]);
break;
case "year":
llTable.fnSort( [[10,'asc']]);
break;
case "workforce":
llTable.fnSort( [[7,'asc']]);
break;
default:
break;
}
}
if (param[0] == "region") {
switch(param[1]) {
case "Midwest":
yadcf.exFilterColumn(llTable, 3, "Midwest");
break;
case "Southwest":
console.log("southwest");
yadcf.exFilterColumn(llTable, 3, "Southwest");
break;
case "Plains":
yadcf.exFilterColumn(llTable, 3, "Plains");
break;
case "Pacific":
yadcf.exFilterColumn(llTable, 3, "Pacific");
break;
case "Mountain":
yadcf.exFilterColumn(llTable, 3, "Mountain");
break;
case "Mid-Atlantic":
yadcf.exFilterColumn(llTable, 3, "Mid-Atlantic");
break;
case "South-Atlantic":
yadcf.exFilterColumn(llTable, 3, "South-Atlantic");
break;
case "New-England":
yadcf.exFilterColumn(llTable, 3, "New England");
break;
case "South":
yadcf.exFilterColumn(llTable, 3, "South");
break;
default:
break;
}
}
});
}
}
I cannot find the documentation that would explain's syntax to use
Any and all feedback is appreciated....
Justin
Hello,
First let me say thanks for all the great work on this plugin!
I am using yadcf slider in a column displaying percentage values. There is no way of moving the slider, I can't even drag the slider min value to max value (if there was only 2 possibles values).
I changed my decimal values to integer: slider now displays perfectly.
Bonus question: I want to retrieve Slider UI values for serverside processing. So far I added two variables in yadcf.js and gave them "ui.values[0]" (resp. ui.values[1]). Is there a cleaner way to do that? (some getter I am missing? It seems I cannot grab slider values from classical "sSearch_[ColNumber] dataTable's param")
Cheers,
Julian
Feature request: adding the placeholder for "simple" multiple select mode for use with jquerymobile (see https://groups.google.com/forum/#!topic/daniels_code/K6nGzn1ab1Q)
Add new filter_match_mode type "startsWith"
Hello,
I'd like to have objects filter in "data" configuration, to be able to filter to value of the select filter instead of label as : [ data: ["1": "A", "2": "B"] ]
Instead of : [ data: ["A", "B"] ]
And use "1" or "2" in DT AJAX request (sSearch item).
Best regards.
When using "sAjaxSource" and "filter_container_id" for external location of filter the filter that being used do not appear as selected
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.