Question

我创建了一个简单的表，其中包含3行状态。缅因州，俄亥俄州和纽约。

当我选择“俄亥俄州”或“缅因州”时，它们在“过滤器输入”中显示为select2选项。但是，纽约没有。

我尝试了不同表排序器版本和select2版本的各种组合，但均未成功。使用4.0.5会“愚弄我”，因为它显示了过滤器输入中的选择，但认为它起作用了，但是过滤不起作用，无法删除它们。

<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>

Tablesorter筛选器格式化程序小部件和Select2不显示带有空格作为选择的值

0 个答案: