Tablesorter - 过滤输入字段和值

Question

我有一个小任务要完成，但我已经到了无济于事的地步……

所以问题来了。我有一个分页表，其中包含值的行中有很多输入字段，我想在这些值中进行搜索。让我展示一下，我希望有人知道我应该做什么......

                        <script type="text/javascript">

        // add parser through the tablesorter addParser method
        $.tablesorter.addParser({
            id: 'inputs',
            is: function(s) {
                return false;
            },
            format: function(s, table, cell, cellIndex) {
                var $c = $(cell);
                // return 1 for true, 2 for false, so true sorts before false
                if (!$c.hasClass('updateInput')) {
                    $c
                    .addClass('updateInput')
                    .bind('keyup', function() {
                        $(table).trigger('updateCell', [cell, false]); // false to prevent resort
                    });
                }
                return $c.find('input').val();
            },
            type: 'text'
        });

        $(function() {
            $('table').tablesorter({
                widgets: ['zebra', 'stickyHeaders', 'resizable', 'filter'],
                widgetOptions: {
              stickyHeaders : '',
              // number or jquery selector targeting the position:fixed element
              stickyHeaders_offset : 110,
              // added to table ID, if it exists
              stickyHeaders_cloneId : '-sticky',
              // trigger "resize" event on headers
              stickyHeaders_addResizeEvent : true,
              // if false and a caption exist, it won't be included in the sticky header
              stickyHeaders_includeCaption : true,
              // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
              stickyHeaders_zIndex : 2,
              // jQuery selector or object to attach sticky header to
              stickyHeaders_attachTo : null,
              // scroll table top into view after filtering
              stickyHeaders_filteredToTop: true,

              resizable: true,
              filter_onlyAvail : 'filter-onlyAvail',
              filter_childRows : true,
              filter_startsWith : true,
              filter_useParsedData : true,
              filter_defaultAttrib : 'data-value'

                },

                headers: {
                    1: {sorter: 'inputs', width: '50px'},
                    2: {sorter: 'inputs'},
                    3: {sorter: 'inputs'},
                    4: {sorter: 'inputs'},
                    5: {sorter: 'inputs'},
                    6: {sorter: 'inputs'},
                    7: {sorter: 'inputs', width: '100px'},
                    8: {sorter: 'inputs', width: '140px'},
                    9: {sorter: 'inputs'},
                    10: {sorter: 'inputs'},
                    11: {sorter: 'inputs'},

                }
            }); $('table').tablesorterPager({container: $(".pager"),
                            positionFixed: false,
                            size: 50,
                            pageDisplay : $(".pagedisplay"),
                            pageSize    : $(".pagesize"),
            });



                $("#table1").tablesorter(options);

                /* make second table scroll within its wrapper */
                options.widgetOptions.stickyHeaders_attachTo = '.wrapper'; // or $('.wrapper')
                $("#table2").tablesorter(options);



            });





        </script>   

表格的结构：

        <tr class="odd" style="display: table-row;">
            <form action="/self.php" method="POST">
            </form><input type="hidden" name="f" value="data">
            <td><input type="hidden" name="mod_id" value="741">741</td>
            <td class="updateInput"><input type="text" name="name" value="Test User Name"></td>
            <td class="updateInput"><input type="text" name="address" value="2548451 Random address"></td>
            <td class="updateInput"><input type="email" name="email" value=""></td>
            <td class="updateInput"><input type="text" name="entitlement" value="none"></td>
            <td class="updateInput"><input type="text" name="card_number" value="6846416548644352"></td>
            <td class="updateInput"><input type="checkbox" name="verify" value="1" checked=""></td>
            <td class="updateInput"><input type="checkbox" name="card_sended" value="1" checked=""></td>
            <td class="updateInput"><input type="text" name="create_date" value="2014-02-12 21:09:16"></td>
            <td class="updateInput"><a href="self.php?f=data&amp;del=741">X</a></td>
            <td class="updateInput"><input type="submit" value="SAVE"></td><td class="updateInput"></td></tr>

所以问题是我不知道如何配置过滤器来搜索这些值...我已经添加了一些选项，但它们都不起作用...任何帮助都会很棒！

Answer 1

我建议使用更新和维护的parser-input-select.js 解析器文件从输入中提取文本并监控更改并更新内部缓存。 grouping widget demo 就是一个使用它的例子。

从 v2.17.6 开始，您可以将输入解析器设置为“提取器”方法。这允许您设置一个方法来提取文本和一个解析器来解析它，例如从输入中提取日期或选择并将这些值解析为日期（有关另一个示例，请参见 this demo）。

headers : {
  0 : {
    // allow extracting text from input elements
    extractor : 'inputs',
    // parse extracted text as a date
    sorter    : 'date'
  }
}