Fatal编程技术网
  • jquery-mobile/
  • Jquery mobile 我应该如何在使用Jquery Mobile 1.4的表中使用data filtertext，其中单元格包含输入？

Jquery mobile 我应该如何在使用Jquery Mobile 1.4的表中使用data filtertext，其中单元格包含输入？

jquery-mobile

Jquery mobile 我应该如何在使用Jquery Mobile 1.4的表中使用data filtertext，其中单元格包含输入？,jquery-mobile,jquery-mobile-table,Jquery Mobile,Jquery Mobile Table,我有一个表，我想使用jqm1.4中新的filterable小部件对其进行过滤。表的每个单元格都包含一个输入，我使用它在发生更改时更新数据库 我向每个元素添加了datafiltertext属性，但是在过滤器输入中键入了多个字母后，过滤器似乎只在第一行工作，没有返回任何行 我试图附加一个自定义过滤器，但我一定是做错了。。。因为它不会开火 有些输入是空的，所以我删除了data filtertext=属性，但这没有帮助 以下是我的测试代码： <html> <head&g

我有一个表，我想使用jqm1.4中新的filterable小部件对其进行过滤。表的每个单元格都包含一个输入，我使用它在发生更改时更新数据库

我向每个元素添加了datafiltertext属性，但是在过滤器输入中键入了多个字母后，过滤器似乎只在第一行工作，没有返回任何行

我试图附加一个自定义过滤器，但我一定是做错了。。。因为它不会开火

有些输入是空的，所以我删除了data filtertext=属性，但这没有帮助

以下是我的测试代码：

    <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>
那么：如何让可过滤小部件根据每个小部件中输入的内容进行过滤？数据过滤器文本是否应放入或输入标记中？这两种都不适合我。附加自定义筛选器时，id应该是筛选器搜索输入的id、表的id还是。。。什么

以下是该页面的链接：

如果在搜索输入中键入F，将显示两行，都包含字母“F”。如果您键入更多字符，则不会返回任何行。

如果您在表格上使用，小部件将筛选表格行，因此，要使其适用于任何类型的表格单元格内容文本，请使用**data filtertext**-属性输入，并将要在表格行上查询的文本设置为：

<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>
这样就行了

还要检查JQM中提供的示例，您的链接已断开，但您的代码运行良好-请参阅@frequent:我的情况正好相反。。。链接可以正常工作，但代码不能正常工作。我使用的是Chrome 31.0.1650.63 m版和Firefox 26.0版。如果我在搜索框中键入除F以外的任何字母，整个表将消失。你知道是什么原因让我这么做而不是你吗？@frequent:你发布的jsbin链接对我来说也一样。。。也就是说，除了一个字母f，它对任何字母都不起作用。我认为您应该在表行上设置filtertext，因为这就是要过滤的内容。否则-如果过滤单元格-过滤器将/应该隐藏行内的单元格，而不是完整的行。因此，行上的filtertext应该包括输入字段的所有文本。只需将它们写在一个字符串中-应该work@frequent：这就成功了！谢谢你，斯文。如果你把它作为一个答案发布，我会接受它，我感谢你的帮助，虽然我不需要引号来分隔单元格中的值，但这对我来说很有用。。。我只是把它们连接成一个空格分隔的字符串，看起来没有空格也可以，但是它更容易阅读，所以我把它们留在。。。