sesselschwitzer

Hello Tobias,

you are right: changing the original code is be the best solution. But I dont’t want to change original code that might lead to unwanted side effects. This is why I am using JS in many cases. Furthermore errors appear on client side and NOT on the server. And – for me – it’s very flexibal, too.

Confounding “Custom CSS” and “Custom Commands” should not be your problem. You cannot catch all user errors. All in all TablePress is idiot-proof ;).

Cheers
Sascha

Hello Tobias,

what do you handle with inputs that textareas do not support?

The workaround with copy/paste requires a copy to keep the linebreaks. On the other side copying formatted code includes indentations inline. Do you know if there a way to include a file with the code into DataTables?

Cheers
Sascha

Sorry, wrong link.

Correct:
https://datatables.net/examples/basic_init/complex_header.html

Hello Tobias,

GOT IT! The “Next” button works now.

Solution:
You must store the current filter info values of searchColumns, searchRegex and searchSmart. I simply added a dynamically created property to FILTER_INFO[<table-id>].

Now the code can be read straight forward and should do the job (please please).

// empty last filter
let dataTable = jTable
    .DataTable()
    .columns( info.lastSearch.searchColumns )
    .search( '', info.lastSearch.searchRegex, info.lastSearch.searchSmart )
    .draw()
    ;

// search within selected column only
if (searchColumns.length > 0){
    dataTable = dataTable.columns( searchColumns );
}

// perform search (at this point with or without searchColumn indices)
dataTable
    .search( filterValue, searchRegex, searchSmart )
    .draw()
    ;

// store current filter data
info.lastSearch = {
    searchColumns: searchColumns,
    searchRegex:   searchRegex,
    searchSmart:   searchSmart,
};

// clear search input
jInput.val('').keyup();

Cheers
Sascha

I believe that the last .search() call causes the issue.

Hello Tobias,

thank you for the fast response. That doesn’t matter (25 table rows). The table itself works which is more important.

Have a nice week 🙂
Sascha

Hello Tobias,

that’s it! Thank your very much.

Remark:
A further advantage of taking use of the DataTable API is that regular expressions are completely hidden for the user: The search input field will not be filled by selected search terms.

Once again the code. Now with a short description of the data structure. Removed one bug.

/*
    FILTER_INFO['table-id-example'] = {
        filterTitle: 'Predef. Search:<br/>', // String (required):  Title. May be empty.
        searchColumns: [ ]                   // Int    (required):  Default col filter index array.
                                             //                     [ ] := filter all columns
        searchRegex: false,                  // Bool   (required):  Default search regex
        searchSmart: true,                   // Bool   (required):  Default search smart
        options: [                           // Array  (required)
            {
                name: 'name',                // String (required):  Option name
                value: 'value',              // String (optional):  Option value. If not set this option will be disabled => "delimiter".
                searchColumns: '-1',         // Int    (optional):  Overwrites default searchColumns
                searchRegex: false,          // Bool   (optional):  Overwrites default searchRegex
                SearchSmart: true            // Bool   (optional):  Overwrites default searchSmartt
            },
// more options
//          { ... }
//          { ... }
        ]
    };
*/

jQuery(document).ready(function($) {

    const FILTER_INFO = [];

    FILTER_INFO['Dokumente_Lexika_Bauwerke'] = {
        filterTitle: 'Vordefinierte Suche:<br/>',
        searchColumns: [ 0 ],// -1 := filter all columns
        searchRegex: false,
        searchSmart: true,
        options: [
            { name: '[Keine]',          value: '' },
            { name: '— Orte —' },
            { name: 'Alsfeld',          value: 'Alsfeld,' },
            { name: 'Altenburg',        value: 'Altenburg,' },
            { name: 'Angenrod',         value: 'Angenrod,' },
            { name: 'Berfa',            value: 'Berfa,' },
            { name: 'Billertshausen',   value: 'Billertshausen,' },
            { name: 'Eifa',             value: 'Eifa,' },
            { name: 'Elbenrod',         value: 'Elbenrod,' },
            { name: 'Eudorf',           value: 'Eudorf,' },
            { name: 'Fischbach',        value: 'Fischbach,' },
            { name: 'Hattendorf',       value: 'Hattendorf,' },
            { name: 'Heidelbach',       value: 'Heidelbach,' },
            { name: 'Leusel',           value: 'Leusel,' },
            { name: 'Liederbach',       value: 'Liederbach,' },
            { name: 'Lingelbach',       value: 'Lingelbach,' },
            { name: 'Münch-Leusel',     value: 'Münch-Leusel,' },
            { name: 'Reibertenrod',     value: 'Reibertenrod,' },
            { name: 'Schwabenrod',      value: 'Schwabenrod,' },
            { name: '— Bauwerke —' },
            { name: 'Regionalmuseum',   value: 'Regionalmuseum', searchColumns: [ 1 ] },
            { name: '— Sonstiges —' },
            { name: 'Routen',           value: 'Route',          searchColumns: [ 1 ] },
        ]
    };
    FILTER_INFO['Dokumente_Lexika_Personen_Buergermeister'] = {
        filterTitle: 'Vordefinierte Suche:<br/>',
        searchColumns: [ 1 ],//-1 := filter all columns
        searchRegex: true,
        searchSmart: true,
        options: [
            { name: '[Keine]',          value: '' },
            { name: '— Jahrhunderte —' },
            { name: '2001 – 2100',      value: '(.*(20(0[1-9]|[1-9]\\d)|2100).*)' },
            { name: '1901 – 2000',      value: '(.*(19(0[1-9]|[1-9]\\d)|2000).*)' },
            { name: '1801 – 1900',      value: '(.*(18(0[1-9]|[1-9]\\d)|1900).*)' },
            { name: '1701 – 1800',      value: '(.*(17(0[1-9]|[1-9]\\d)|1800).*)' },
            { name: '1601 – 1700',      value: '(.*(16(0[1-9]|[1-9]\\d)|1700).*)' },
            { name: '1501 – 1600',      value: '(.*(15(0[1-9]|[1-9]\\d)|1600).*)' },
            { name: '1401 – 1500',      value: '(.*(14(0[1-9]|[1-9]\\d)|1500).*)' },
            { name: '1301 – 1400',      value: '(.*(13(0[1-9]|[1-9]\\d)|1400).*)' },
//            { name: '— Territorien —' },
//            { name: '1567 – 1604',      value: '(.*((15(6[7-9]|[7-9]\\d))|(160(0-4))).*)' },
//            { name: '1604 – 1806',      value: '(.*((16(0[4-9]|[1-9]\\d))|(17\\d\\d)|(180[0-6])).*)' },
//            { name: '— Sonstiges —' },
//            { name: 'bis 1574',         value: '(.*((13\\d\\d|14\\d\\d)|(15([0-6]\\d|7[0-4])).*))' },
        ]
    };

    /**
     * Creates and adds a <select> tag with <option> tags under the search input field.
     */
    function addFilterSelectTagToDOM( jWrapper, tableID ){

        let filterSelectTag = '';

        // build <option> tags
        let options = FILTER_INFO[tableID].options;
        for (let i = 0; i < options.length; i++) {

            let optionValue = options[i].name;
            let optionAttributes = (options[i].hasOwnProperty('value'))
                ? ' value="' + options[i].value + '"'
                : ' disabled="disabled"'
                ;

            filterSelectTag += '<option' + optionAttributes + '>' + optionValue + '</option>';
        }

        filterSelectTag = '<select>' + filterSelectTag + '</select>';

        // append HTML
        jWrapper.find('.dataTables_filter').after(
            '<div' +
                ' class="predefined-filter"' +
                ' style="clear: both; display: block; text-align: right;"' +
            '>' +
                FILTER_INFO[tableID].filterTitle + filterSelectTag +
            '</div>'
        );

        let jSelect = jWrapper.find('.predefined-filter select');
        return jSelect;
    }

    /**
     * See: https://datatables.net/examples/api/regex.html
     *      https://datatables.net/reference/api/columns().search()
     */
    function setSearchTableCallbacks( tableID, jInput, jSelect ){

        // Search Input field key down => set select option 0
        jInput.keydown( function(){
            if (jSelect.prop('selectedIndex') != '0')
                jSelect.prop('selectedIndex', '0').change();
        });

        // Search Input field key down => run search (will be triggered ALREADY)
        //jInput.keyup( function(){ ... });

        // Option change => run search
        jSelect.change( function(){
            return function(){
                let info = FILTER_INFO[tableID];
                let option = info.options[ jSelect.prop('selectedIndex') ];
                
                // use specifix option property or default options property
                let searchColIdx = option.hasOwnProperty('searchColumns') ? option.searchColumns : info.searchColumns;
                let searchRegex  = option.hasOwnProperty('searchRegex')     ? option.searchRegex     : info.searchRegex;
                let searchSmart  = option.hasOwnProperty('searchSmart')     ? option.searchSmart     : info.searchSmart;

                let jTable = $('#tablepress-' + tableID);
                let filterValue = $(this).children(":selected").val();

                if (searchColIdx.length > 0)// search single columns
                    jTable
                        .DataTable()
                        .search( '' )// remove global columns filter (empties search input field, too)
                        .columns( searchColIdx )// search within single column only
                        .search( filterValue, searchRegex, searchSmart )
                        .draw()
                        .search( '' )// remove single columns filter (but do NOT redraw table)
                        ;
                else// search all columns
                    jTable
                        .DataTable()
                        .search( filterValue, searchRegex, searchSmart )
                        .draw()
                        .search( '' )// remove global columns filter (but do NOT redraw table)
                        ;
            };
        }());
    }

    /**
     * 
     */
    function main() {
        for (let tableID in FILTER_INFO){
            if (FILTER_INFO.hasOwnProperty(tableID)) {
    
                let jWrapper = $('#tablepress-' + tableID + '_wrapper');
                if (jWrapper.length) {

                    let jInput = jWrapper.find('.dataTables_filter > label > input[type="search"]');
                    let jSelect = addFilterSelectTagToDOM( jWrapper, tableID );

                    setSearchTableCallbacks( tableID, jInput, jSelect );
                }
            }
        }
    }

    main();
});

Best wishes
Sascha