Виджет средства форматирования фильтра Tablesorter и Select2 не отображают значения с пробелами в качестве выделения - PullRequest
Новая
       8

Виджет средства форматирования фильтра Tablesorter и Select2 не отображают значения с пробелами в качестве выделения

0 голосов
/ 02 января 2019

Я создал простую таблицу, которая включает 3 строки состояний.Мэн, Огайо и Нью-Йорк.

Когда я выбираю Огайо или Мэн, они отображаются в качестве выбора select2 на входе фильтра.Тем не менее, Нью-Йорк этого не делает.

Я пробовал различные комбинации разных версий таблиц и версий select2, но безуспешно.Использование 4.0.5 «обманывает меня», заставляя думать, что оно работает, так как показывает варианты выбора во входных данных фильтра, но фильтрация не работает, и нет никакого способа их удалить.

JSFiddle: https://jsfiddle.net/r6tqpne2/

<body>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/theme.blue.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/filter.formatter.min.css" rel="stylesheet" type="text/css"/>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.css" rel="stylesheet">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.widgets.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/widgets/widget-filter-formatter-jui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/widgets/widget-columnSelector.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/widgets/widget-pager.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/widgets/widget-filter-formatter-select2.min.js"></script>


    <table id="test-table" class="tablesorter">
        <thead>
            <tr>
              <th class="state-col">Test</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>New York</td>
            </tr>
            <tr>
                <td>Ohio</td>
            </tr>
            <tr>
                <td>Maine</td>
            </tr>
        </tbody>
    </table>


    <script>
        $(document).ready(function(){

            $("#test-table").tablesorter({

                theme: 'blue',

                // initialize zebra striping and filter widgets
                widgets: ['filter'],

                widgetOptions : {

                    filter_formatter : {

                        // Alphanumeric (match)
                        ".state-col": function($cell, indx) {
                            return $.tablesorter.filterFormatter.select2( $cell, indx, {
                                match : false
                            });
                        }

                    }

                }
            });

        });

    </script>

  </body>
...