vedmack / yadcf Goto Github PK

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 :

• test1
• test0-test1

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.

1. I thought I saw somewhere (maybe here in issues) that there's a way to remove the filter_reset_button, but I don't see that in the documentation in 0.6.4 jquery.dataTables.yadcf.js. Is this available? Can that be added to the documentation?
2. I'd like to choose one of the values in the hidden column as the default, but I don't see any external function to get the values from a column. I hesitate to use any of the internal functions. Could something be made external to get these values? or maybe an option to use the first available as default.
3. I'd like be able to disable the "Select value" option.

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

jquery ui range slider

or

noUiSlider

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();
        }
    });

When i enable autocomplete function with filter_container_id there are some errors and the input doesnt show up. without autocomplete it works fine.

autocomplete off:

autocomplete on:

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