0

I have a table which I would like to filter using the new filterable widget in JQM 1.4. Each cell of the table contains an input, which I use to update a database on "change".

I added the data-filtertext attribute to each element, but the filter only seems to work on the first row (after more than one letter has been typed in the filter input no rows are returned).

I tried to attach a custom filter but I must be doing that wrong... because it doesn't fire.

Some inputs are empty, so I removed the data-filtertext='' attribute, but that didn't help.

Here's the code to my test:

    <html>
    <head>
    <title>Test Table Filter</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js">    </script>
  </head>
  <body>
    <div data-role='page'>
      <div data-role='content'>
        <form>
          <input id="venue_filterTable-input" data-type="search" />
        </form>
        <table id='venueTable' class='ui-responsive' data-role='table' data-filter='true' data-input='#venue_filterTable-input'
        cellpadding='15' cellspacing='1'>
          <thead>
            <tr>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Club Name</th>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Contact</th>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Phone</th>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>City</th>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Last Called</th>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Next Call</th>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Notes</th>
              <th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Assigned To</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-filtertext='Fiddle Dee Dee'>
                <input name="club_name" class='venue_input' value="Fiddle Dee Dee" placeholder="Club Name" data-idvenue='63' />
              </td>
              <td>
                <input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='63' />
              </td>
              <td data-filtertext='2535551213'>
                <input name="phone" class="venue_input phone" value="2535551213" placeholder="Phone" data-idvenue='63' />
              </td>
              <td data-filtertext='Auburn'>
                <input name="city" class='venue_input' value="Auburn" placeholder="City" data-idvenue='63' />
              </td>
              <td data-filtertext='2013-12-02'>
                <input name="last_called" class='date venue_input' value="2013-12-02" placeholder="Last Called"
                data-idvenue='63' />
              </td>
              <td data-filtertext='2014-01-02'>
                <input name="next_call" class='date venue_input' value="2014-01-02" placeholder="Next Call" data-idvenue='63' />
              </td>
              <td data-filtertext='fiddle dee dee'>
                <textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='63'>fiddle dee dee</textarea>
              </td>
              <td data-filtertext='Jojo'>
                <input name="assigned_to" class='venue_input' value="Jojo" placeholder="Assigned To" data-idvenue='63' />
              </td>
            </tr>
            <tr>
              <td data-filtertext='Satellite'>
                <input name="club_name" class='venue_input' value="Satellite" placeholder="Club Name" data-idvenue='61' />
              </td>
              <td ">
                <input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='61' />
              </td>
              <td data-filtertext='3605551212'>
                <input name="phone" class="venue_input phone" value="3605551212" placeholder="Phone" data-idvenue='61' />
              </td>
              <td data-filtertext='Bremerton'>
                <input name="city" class='venue_input' value="Bremerton" placeholder="City" data-idvenue='61' />
              </td>
              <td data-filtertext='2013-12-03'>
                <input name="last_called" class='date venue_input' value="2013-12-03" placeholder="Last Called"
                data-idvenue='61' />
              </td>
              <td data-filtertext='2014-01-03'>
                <input name="next_call" class='date venue_input' value="2014-01-03" placeholder="Next Call" data-idvenue='61' />
              </td>
              <td ">
                <textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='61'></textarea>
              </td>
              <td data-filtertext='agency'>
                <input name="assigned_to" class='venue_input' value="agency" placeholder="Assigned To" data-idvenue='61' />
              </td>
            </tr>
            <tr>
              <td data-filtertext='Here In My Soup'>
                <input name="club_name" class='venue_input' value="Here In My Soup" placeholder="Club Name" data-idvenue='62' />
              </td>
              <td ">
                <input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='62' />
              </td>
              <td data-filtertext='2535551212'>
                <input name="phone" class="venue_input phone" value="2535551212" placeholder="Phone" data-idvenue='62' />
              </td>
              <td data-filtertext='Federal Way'>
                <input name="city" class='venue_input' value="Federal Way" placeholder="City" data-idvenue='62' />
              </td>
              <td data-filtertext='2013-12-04'>
                <input name="last_called" class='date venue_input' value="2013-12-04" placeholder="Last Called"
                data-idvenue='62' />
              </td>
              <td data-filtertext='2014-01-06'>
                <input name="next_call" class='date venue_input' value="2014-01-06" placeholder="Next Call" data-idvenue='62' />
              </td>
              <td data-filtertext='four piece or less; pays in scrapple'>
                <textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='62'>four piece or less; pays in
                scrapple</textarea>
              </td>
              <td ">
                <input name="assigned_to" class='venue_input' value="" placeholder="Assigned To" data-idvenue='62' />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <script>
        $.mobile.document.one( "filterablecreate", "#venue_filterTable-input", function() {
                $( "#venue_filterTable-input" ).filterable( "option", "filterCallback",
                    function( index,searchValue ) {
                    // custom filtering logic 
                                         alert($(this).find('input').val() );
                });
        });

     </script>
      </div>
     </body>
    </html>

So: how can I get the filterable widget to filter based on the contents of the input inside each <td>? Should the data-filtertext go in the <td> or the input tag? (neither seems to work for me). When attaching a custom filter, should the id be the id of the filter search input, or the table, or ... what?

Here's a link to the page: http://bandorama.us/test.html

If you type F into the search input, two rows are displayed (both containing the letter 'f'). If you type any more characters, no rows are returned.

frequent
  • 27,643
  • 59
  • 181
  • 333
Gene
  • 83
  • 1
  • 1
  • 9
  • your link is broken, but your code works fine - see [here](http://jsbin.com/ofuhaw/1077/) – frequent Dec 18 '13 at 22:04
  • @frequent: it's the opposite for me... the link works fine, but the code does not. I'm using Chrome Version 31.0.1650.63 m and Firefox 26.0. If I type any letters other than "F" in the search box, the whole table disappears. Any idea what could cause that for me but not for you? – Gene Dec 18 '13 at 23:43
  • @frequent: the jsbin link you posted works the same for me... which is to say that it doesn't work on any letter except a single letter "f". – Gene Dec 19 '13 at 01:54
  • ok I see. I think you should set your filtertext on the table row because that is what is being filtered. Otherwise - if filtering cells - the filter would/should hide cells within a row and never the complete row. So your `filtertext` on a row should include all the text of the input fields. Just write them in a single string - should work – frequent Dec 19 '13 at 08:35
  • @frequent: That did the trick! Thanks Sven. If you post it as an answer, I'll accept it, and I appreciate the help – Gene Dec 19 '13 at 20:29

1 Answers1

0

If you use the filterable widget on a table, the widget will filter table rows, so to make it work with any kind of table cell content (text, input) you should use the **data-filtertext**-attribute and set the text to be queried on the table row like so:

<tr data-filtertext="foo_from_cell_1, bar_from_cell_2, baz_from_cell_3...">
    <td>foo</td>
    <td><div><p><span>bar</span></p></div></td>
    <td><input type="text" value="baz"/></td>
</tr>

This way it will work.

Also check the example provided in the JQM demos

frequent
  • 27,643
  • 59
  • 181
  • 333
  • This worked for me (though I did not need the quotes separating the values in the cells... I just concatenated them into a space separated string (and it looks like it works fine without spaces, but it's easier to read so I'm leaving them in...) – Gene Dec 19 '13 at 21:35