imqishi / jquery-datatables-column-filter

Add features and optimize original things to dataTables-columnFilter.
1 stars 0 forks source link

Wait for the "enter" key and refresh cache? #98

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
I have a server side datatables setting, and I want to use this plugin. But I'd 
like it to wait for the user to press the enter key so it can start 
filtering(searching)

So far, I've changed the fnCreateInput function so that it waits for the enter 
key (keycode 13), and it also sets the focus on the next filter element (I'm 
using input texts only).

This works already, but the "refresh cache?" part is what I can't get to work. 

What steps will reproduce the problem?
1. Write something on one filter field and press enter (It should take you to 
the next field and filter the table as supposed to.)
2. Erase the value you just wrote and change the focus to other field (without 
pressing the enter key)
3. Press enter (having written any other value to filter or not, it does the 
same)

What is the expected output? What do you see instead?

Even though the field has nothing written on it, the table is still filtered on 
the previous value.

What version of the product are you using? On what operating system?
 1.4.8.

Please provide any additional information below.
this is how my fnCreateInput looks like now:

function fnCreateInput(oTable, regex, smart, bIsNumber, iFilterLength, 
iMaxLenght) {
            var sCSSClass = "text_filter";
            if (bIsNumber)
                sCSSClass = "number_filter";

            label = label.replace(/(^\s*)|(\s*$)/g, "");
            var currentFilter = oTable.fnSettings().aoPreSearchCols[i].sSearch;
            var search_init = 'search_init ';
            var inputvalue = label;
            if (currentFilter !== '' && currentFilter != '^') {
                if (bIsNumber && currentFilter.charAt(0) == '^')
                    inputvalue = currentFilter.substr(1); //ignore trailing ^
                else
                    inputvalue = currentFilter;
                search_init = '';
            }

            var input = $('<input type="text" class="' + search_init + sCSSClass + '" value="' + inputvalue + '"/>');
            if (iMaxLenght !== undefined && iMaxLenght != -1) {
                input.attr('maxlength', iMaxLenght);
            }
            th.html(input);
            if (bIsNumber)
                th.wrapInner('<span class="filter_column filter_number" />');
            else
                th.wrapInner('<span class="filter_column filter_text" />');

            asInitVals[i] = label;
            var index = i;

            if (bIsNumber && !oTable.fnSettings().oFeatures.bServerSide) {
                input.keyup(function (event) {

                    if(event.which == 13)
                    {
                        oTable.fnFilter(this.value, _fnColumnIndex(index), true, false); //busca esta información exactamente
                        fnOnFiltered();
                       // console.log(input.parent().parent().next().children().children());
                        input.parent().parent().next().children().children().focus();
                    }

                });
            } else {
                input.keyup(function (event) {

                    if(event.which == 13)
                    {
                        if (oTable.fnSettings().oFeatures.bServerSide && iFilterLength !== 0) {
                            //If filter length is set in the server-side processing mode
                            //Check has the user entered at least iFilterLength new characters

                            var currentFilter = oTable.fnSettings().aoPreSearchCols[index].sSearch;
                            var iLastFilterLength = $(this).data("dt-iLastFilterLength");
                            if (typeof iLastFilterLength == "undefined")
                                iLastFilterLength = 0;
                            var iCurrentFilterLength = this.value.length;
                            if (Math.abs(iCurrentFilterLength - iLastFilterLength) < iFilterLength
                            //&& currentFilter.length === 0 //Why this?
                                ) {
                                //Cancel the filtering
                                return;
                            }
                            else {
                                //Remember the current filter length
                                $(this).data("dt-iLastFilterLength", iCurrentFilterLength);
                            }
                        }
                        /* Filter on the column (the index) of this element */
                        oTable.fnFilter(this.value, _fnColumnIndex(index), regex, smart); //Issue 37
                        fnOnFiltered();
                        //console.log(input.parent().parent().next().children().children());
                        input.parent().parent().next().children().children().focus();
                    }
                });
            }

            input.focus(function () {
                if ($(this).hasClass("search_init")) {
                    $(this).removeClass("search_init");
                    this.value = "";
                }
            });
            input.blur(function () {
                if (this.value === "") {
                    $(this).addClass("search_init");
                    this.value = asInitVals[index];
                }
            });
        }

thanks, 

Original issue reported on code.google.com by ackz...@gmail.com on 22 Sep 2012 at 1:20