Tablesorter - filter inside input fields and values

Posted by Zeracoke on Stack Overflow See other posts from Stack Overflow or by Zeracoke
Published on 2014-08-21T12:26:30Z Indexed on 2014/08/21 22:20 UTC
Read the original article Hit count: 199

Filed under:
|
|
|

I have a small quest to accomplish, and I reached a point when nothing works...

So the problem is. I have a paged table with a lot of input fields inside the rows with values, and I would like to search inside these values. Let me Show this, I hope that somebody will got the idea what I should do...

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

The structure of the tables:

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

So the thing is I don't know how to configure the filter to search these values... I already added some options, but none of them are working... Any help would be great!

© Stack Overflow or respective owner

Related posts about database

Related posts about table