initFilterMultipleTables filter type select/chosen + multiple selectboxes

[Muhahe]

Hi,

is there posibility to have multiple selectboxes for initFilterMultipleTables? My idea is to have multiple tables, with same number and type of columns, but to have single filter to filter them. (one filter for one column in each table)

[vedmack]

Just to be clear, you want that initFilterMultipleTables will be able to provide you with a multi select filter that will be integrated with select2/chosen?

p.s , for the record, the multi table filter does not care about the table to be with same column numbers/order/etc' and... the multi table filter can't filter single column across all tables, it will filter across all columns in all tables.

[Muhahe]

sorry for me explanation skills :)

but i want initFilterMultipleTables to provide me same count of filters (selectboxes) as target tables have columns, and each selectbox should filter only single column. Same as it is for normal filter.

e.g. i have 6 tables with 4 columns (partName, serial number, date, type) and i wana to have one container element which will contains 4 selectboxes (one for each column). Each selectbox will have all data from certain column from all tables.

[vedmack]

Ohh, that is a brand new behavior for the filter of multiple tables :| not gonna happen too soon I'm a afraid... (its not a big deal, just that I'm busy and there other open issues)

[Muhahe]

i have my own idea how to realize it from multipleTables, so i will try my best.(as soon as i get some time in christmass)

[vedmack]

in case of pull request do it on the beta version and let me know what are you plans, so you won't work hard for nothing :)

[Muhahe]

So my current plan is to use your initFilterMultipleTables function and make here some changes.

currently i done this (and its seems to work) but there is more work left.

Idea is, mainly in looping appendFiltersMultipleTable (for each column) which should make all hard work :)

        function initFilterMultipleTablesMultipleColumns(tablesArray, filterOptions) {
        var i,
            tablesSelectors = '',
            default_options = {
                filter_type : "text",
                filter_container_id: '',
                filter_reset_button_text: 'x',
                case_insensitive: true

            };

                var columnNumbers = new Array();
                columnNumbers = filterOptions.columnNumbers.split(",").sort();
        if (filterOptions.filter_default_label === undefined) {
            if (filterOptions.filter_type === "select" || filterOptions.filter_type === 'custom_func') {
                filterOptions.filter_default_label = "Select value";
            } else if (filterOptions.filter_type === "multi_select" || filterOptions.filter_type === 'multi_select_custom_func') {
                filterOptions.filter_default_label = "Select values";
            } else if (filterOptions.filter_type === "auto_complete" || filterOptions.filter_type === "text") {
                filterOptions.filter_default_label = 'Type to filter';
            } else if (filterOptions.filter_type === "range_number" || filterOptions.filter_type === "range_date") {
                filterOptions.filter_default_label = ["from", "to"];
            } else if (filterOptions.filter_type === "date") {
                filterOptions.filter_default_label = "Select a date";
            }
        }
        for (i = 0; i < tablesArray.length; i++) {
                    //20141226 tablesArray now should contains names instead of datatable instances
                    //  tablesSelectors += tablesArray[i].settings()[0].oInstance.selector + ',';
                    //tablesSelectors += tablesArray[i] + ',';
                    tablesSelectors += '#' + tablesArray[i][0].id + ',';
        }
        tablesSelectors = tablesSelectors.substring(0, tablesSelectors.length - 1);
        filterOptions = $.extend({}, default_options, filterOptions);

        setOptions(tablesSelectors, filterOptions);

                for (i = 0; i < columnNumbers.length; i++){
                    appendFiltersMultipleTablesMultipleColumns(tablesSelectors, tablesArray, filterOptions, columnNumbers[i]);
                }
    }

        function appendFiltersMultipleTablesMultipleColumns(tablesSelectors, tablesArray, filterOptions, numOfColumn) {
        var filter_selector_string = "#" + filterOptions.filter_container_id,
            $filter_selector = $(filter_selector_string).find(".yadcf-filter"),
            table_selector_jq_friendly = yadcf.generateTableSelectorJQFriendlyNew(tablesSelectors),
            options_tmp,
                        i,
            ii;

        //add a wrapper to hold both filter and reset button
        $(filter_selector_string).append("<div id=\"yadcf-filter-wrapper-"+numOfColumn + table_selector_jq_friendly + "\" class=\"yadcf-filter-wrapper\"></div>");
        filter_selector_string = filter_selector_string + " div#yadcf-filter-wrapper-" + numOfColumn + table_selector_jq_friendly;

        switch (filterOptions.filter_type) {
        case 'text':
            $(filter_selector_string).append("<input type=\"text\" id=\"yadcf-filter-" + table_selector_jq_friendly + "\" class=\"yadcf-filter\" onclick='yadcf.stopPropagation(event);"
                + "' placeholder='" + filterOptions.filter_default_label + "'" + " onkeyup=\"yadcf.textKeyUpMultiTables('" + tablesSelectors + "',event);\"></input>");
            if (filterOptions.filter_reset_button_text !== false) {
                $(filter_selector_string).find(".yadcf-filter").after("<input value=\"" + filterOptions.filter_reset_button_text + "\" type=\"button\" " + " id=\"yadcf-filter-" + table_selector_jq_friendly + "-reset\"" +
                    "onclick=\"yadcf.stopPropagation(event);yadcf.textKeyUpMultiTables('" + tablesSelectors + "', event, 'clear'); return false;\" class=\"yadcf-filter-reset-button\">");
            }
            break;
        case 'select':
            options_tmp = "<option value=\"" + "-1" + "\">" + filterOptions.filter_default_label + "</option>";
            if (filterOptions.select_type === 'select2' && filterOptions.select_type_options.placeholder !== undefined && filterOptions.select_type_options.allowClear === true) {
                options_tmp = "<option value=\"\"></option>";
            }
                        /*
            if (filterOptions.data === undefined) {
                alert('initFilterMultipleTables missing the data attribute');
                return;
            }*/
                        //datasource should be table.fnSettings().aoData[iterate][columnNumber]._aFilterData

                        for (i = 0; i < tablesArray.length; i++){
                            for (ii = 0; ii <tablesArray[i].fnSettings().aoData.length;ii++){
                                options_tmp += "<option value=\"" + tablesArray[i].fnSettings().aoData[ii]._aFilterData[numOfColumn] + "\">" + tablesArray[i].fnSettings().aoData[ii]._aFilterData[numOfColumn] + "</option>" ;
                            }
                        }

                        /*if (typeof filterOptions.data[0] === 'object') {
                for (ii = 0; ii < filterOptions.data.length; ii++) {
                    options_tmp += "<option value=\"" + filterOptions.data[ii].value + "\">" + filterOptions.data[ii].label + "</option>";
                }
            } else {
                for (ii = 0; ii < filterOptions.data.length; ii++) {
                    options_tmp += "<option value=\"" + filterOptions.data[ii] + "\">" + filterOptions.data[ii] + "</option>";
                }
            }*/
            $(filter_selector_string).append("<select id=\"yadcf-filter-" + table_selector_jq_friendly + "\" class=\"yadcf-filter\" " +
                "onchange=\"yadcf.doFilterMultiTables('" + tablesSelectors + "',event)\" onclick='yadcf.stopPropagation(event);'>" + options_tmp + "</select>");

            if (filterOptions.select_type !== undefined && filterOptions.select_type === 'chosen') {
                $("#yadcf-filter-" + table_selector_jq_friendly).chosen(filterOptions.select_type_options);
                $("#yadcf-filter-" + table_selector_jq_friendly).next().attr("onclick", "yadcf.stopPropagation(event);");
            } else if (filterOptions.select_type !== undefined && filterOptions.select_type === 'select2') {
                $("#yadcf-filter-" + table_selector_jq_friendly).select2(filterOptions.select_type_options);
            }
            if (filterOptions.filter_reset_button_text !== false) {
                $(filter_selector_string).find(".yadcf-filter").after("<input value=\"" + filterOptions.filter_reset_button_text + "\" type=\"button\" " + " id=\"yadcf-filter-" + table_selector_jq_friendly + "-reset\"" +
                    "onclick=\"yadcf.stopPropagation(event);yadcf.doFilterMultiTables('" + tablesSelectors + "', event, 'clear'); return false;\" class=\"yadcf-filter-reset-button\">");
            }
            break;
        default:
            alert('Filters Multiple Tables does not support ' + filterOptions.filter_type);
        }
    }

[vedmack]

I think that a slighter modification to the current function would be enough, until I add it you can use yours...

[vedmack]

You want multi select input for multiple tables? Asking because you mentioned it in issue title but havent done so in your posted code sample. ..

[Muhahe]

yes, that is correct :)

Here is picture to better explanation. There is one standart main datatable with normal yadcf multi_select filter. Each of its row have posibility to be parent row. Parent row have another (nested) datatable inside after clicking + sing (you can see on second row). Something like tree structure. Above main datatable there is another yadcf multi_select filter, which can perform this subtables.

But its in early stages, so css make it a bit unreadable

[vedmack]

Massive enhancement to the initMultipleTables , now it also read the columns data automatically and place it into select element options still need to add multi select for this one, please test it and see how it behaves for you

[Muhahe]

i made a bit tests and woooow it seems like it works. thank you very much, +5 internets for you :)
only one problem i found, but manage to solve it.

when i try to initialize it like this

    yadcf.initMultipleTables(subTablesList,[{column_number: [1], filter_container_id:'multiFilterContainer_1', filter_type: 'select', column_data_type: 'rendered_html'},
                                            {column_number: [2], filter_container_id:'multiFilterContainer_2', filter_type: 'select', column_data_type: 'rendered_html'},
                                            {column_number: [3], filter_container_id:'multiFilterContainer_3', filter_type: 'select', column_data_type: 'rendered_html'},
                                            {column_number: [4], filter_container_id:'multiFilterContainer_4', filter_type: 'select', column_data_type: 'rendered_html'},
                                            {column_number: [5], filter_container_id:'multiFilterContainer_5', filter_type: 'select', column_data_type: 'rendered_html'},
                                            {column_number: [6], filter_container_id:'multiFilterContainer_6', filter_type: 'select', column_data_type: 'rendered_html'},
                                            {column_number: [7], filter_container_id:'multiFilterContainer_7', filter_type: 'select', column_data_type: 'rendered_html'},
                            ])

there is issue with tablesSelector variable, which isnt empty for next filter processing on line 2660
(so i added line tablesSelectors = '' before loop)

tablesSelectors = ''
            for (i = 0; i < tablesArray.length; i++) {
                //tablesSelectors += tablesArray[i].settings()[0].oInstance.selector + ',';
                                tablesSelectors += '#' + tablesArray[i][0].id + ',';
            }

and also there is minor problem, that my datatables dont have .oInstance.selector, but it may be only my issue

---

also i extended code a bit to suport tables which arent currently in DOM (im using show/hide on child tables, so i have initialized them in array)

im passing aditional array with tables and tableTmp is from this array

function appendFiltersMultipleTables(tablesSelectors, colObjDummy, tablesArray) {

tableTmp = tablesArray[tableTmpArrIndex]

also there is change in doFilterMultiTables. But its only for my case, when i have all tables stored in public array :/ filtering e.g

if (columnsObj.column_number instanceof Array) {
                               for (i=0;i< subTablesList.length;i++){
                                   subTablesList[i].api().columns(columnsObj.column_number).search('').draw();
                               } 
                //$(tablesSelectors).DataTable().columns(columnsObj.column_number).search('').draw();
            } else {
                               for (i=0;i< subTablesList.length;i++){
                                   subTablesList[i].api().search('').draw();
                               } 
                //$(tablesSelectors).DataTable().search('').draw();
            }
            return;

if (columnsObj.column_number instanceof Array) {
                        for (i=0;i< subTablesList.length;i++){
                            subTablesList[i].api().columns(columnsObj.column_number).search(serachVal, regex, smart, caseInsen).draw();
                        } 
            //$(tablesSelectors).DataTable().columns(columnsObj.column_number).search(serachVal, regex, smart, caseInsen).draw();
        } else {
                        for (i=0;i< subTablesList.length;i++){
                            subTablesList[i].api().DataTable().search(serachVal, regex, smart, caseInsen).draw();
                        } 
            //$(tablesSelectors).DataTable().search(serachVal, regex, smart, caseInsen).draw();
        }

hope it isnt too much dirty :)

[Muhahe]

another question, is there implemented saveState for multiple filters multiple columns?

[vedmack]

Will take a closer look at the bugs you found and the tweeks you did for your scenario in a few days (hopefully) regarding state saving - since its not a standard filtering and not supported directly by datatables probably I will have to write some additional code for that... open a new issue for that. But it will take some time, since there are other open issues

[Muhahe]

about filtering i was just asking. im now trying to make that running. And about datatables, they remember state, only filters stay empty.

[vedmack]

Please grab the new 0.8.7.beta.8 version and update me on what am I still missing in my implementation, latest version don't rely on table selector and the filtering was also improved

Also added a showcase page http://yadcf-showcase.appspot.com/dom_multi_columns_tables_1.10.html

[Muhahe]

HI vedmack, sorry for my delay, but im totaly bussy with exams now. But will reply test and reply ASAP

[Muhahe]

Im looking for 0.8.7.beta.8 but found only 0.8.7. Is it still availible?

[vedmack]

Its not a beta anymore... 0.8.7 is the final form of that version... (0.8.7 > 0.8.7.beta.XXX) :)

On Tue, Feb 24, 2015 at 1:05 PM, Muhahe notifications@github.com wrote:

Im looking for 0.8.7.beta.8 but found only 0.8.7. Is it still availible?

—
Reply to this email directly or view it on GitHub
#132 (comment).

[Muhahe]

So i test it and i miss suport for chosen multiselect and for save state. Or am i missing some initialization?

[vedmack]

Only the fact that this issue is still open and the other issue #143 is still open too :) I still haven't finish those two, my last commits on this feature were 1) don't rely on table selector 2) improve filtering mechanism

[Muhahe]

okay thanks :) my bad. this seems it works fine to me (just made a some minor changes because of my issue somewhere)

[vedmack]

Done in 0.8.8.beta.10, see in action and scroll down to see code snippet