Tablesorter - 过滤输入字段和值

时间:2014-08-21 12:26:30

标签: javascript database filter html-table tablesorter

我有一个小小的任务要完成,当没有任何作用时我达到了一个点......

所以问题是。我有一个分页表,在行内有很多带有值的输入字段,我想在这些值中搜索。让我说明一下,我希望有人能够明白我应该做些什么......

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

所以事情是我不知道如何配置过滤器来搜索这些值...我已经添加了一些选项,但它们都没有工作......任何帮助都会很棒!

1 个答案:

答案 0 :(得分:0)

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

从v2.17.6开始,您可以将输入解析器设置为&#34;提取器&#34;方法。这允许您设置一个提取文本的方法和一个解析它的解析器,例如从输入中提取日期或选择并将这些值解析为日期(另请参阅this demo)。

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