jquery手機 - 如何表+搜索欄

我想在我的頁面中使用列切換表的代碼，但我希望它在頂部也有一個搜索欄..我嘗試過很多方式，但我有兩個問題，第一，搜索欄開始搜索表格的toogle按鈕文本，第二，搜索欄搜索表格的元素，但它獲得了高度，並隱藏了toogle按鈕...什麼是最好的在這裏實現搜索欄的方式？jquery手機 - 如何表+搜索欄

表的代碼：

<table data-role="table" id="my-table" data-mode="columntoggle" 
      class="ui-body-d ui-shadow table-stripe ui-responsive" 
      data-column-btn-theme="b" data-column-btn-text="Colunas" 
      data-column-popup-theme="a"> 

<thead> 
    <tr class="ui-bar-d"> 
     <th data-priority="1">ID</th> 
     <th>Nome</th> 
     <th data-priority="2">Ano</th> 
     <th data-priority="3">Descrição</th> 
    </tr> 
</thead> 

<tbody> 
    <tr> 
     <th>1</th> 
     <td>Citizen Kane</td> 
     <td>1941</td> 
     <td>100%</td> 
    </tr> 
    <tr> 
     <th>2</th> 
     <td>Casablanca</td> 
     <td>1942</td> 
     <td>97%</td> 
    </tr> 
    <tr> 
     <th>3</th> 
     <td>The Godfather</td> 
     <td>1972</td> 
     <td>97%</td> 
    </tr> 
    <tr> 
     <th>4</th> 
     <td>Gone with the Wind</td> 
     <td>1939</td> 
     <td>96%</td> 
    </tr> 
    <tr> 
     <th>5</th> 
     <td>Lawrence of Arabia</td> 
     <td>1962</td> 
     <td>94%</td> 
    </tr> 
    <tr> 
     <th>6</th> 
     <td>Dr. Strangelove Or How I Learned to Stop Worrying and 
      Love the Bomb</td> 
     <td>1964</td> 
     <td>92%</td> 
    </tr> 
    <tr> 
     <th>7</th> 
     <td>The Graduate</td> 
     <td>1967</td> 
     <td>91%</td> 
    </tr> 
    <tr> 
     <th>8</th> 
     <td>The Wizard of Oz</td> 
     <td>1939</td> 
     <td>90%</td> 
    </tr> 
    <tr> 
     <th>9</th> 
     <td>Singin' in the Rain</td> 
     <td>1952</td> 
     <td>89%</td> 
    </tr> 
    <tr> 
     <th>10</th> 
     <td>Inception</td> 
     <td>2010</td> 
     <td>84%</td> 
    </tr> 

</tbody>

來源

2014-01-21 yat0

這裏是一個DEMO

<form> 
    <input id="filterTable-input" data-type="search" /> 
</form> 
<table data-role="table" data-mode="columntoggle" id="movie-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive table-stroke" data-column-btn-theme="b" data-column-btn-text="Colunas" data-column-popup-theme="a">

來源

2014-01-21 14:21:00 ezanker

完美，我不知道該數據輸入..非常感謝:) – yat0

任何方式使這個並排？ – markthegrea

就像這樣：http://jsfiddle.net/ezanker/fr8Yd/9/？ – ezanker

你試過嗎？

<div data-role="fieldcontain"> 
<label for="search-2">Search Input:</label> 
<input type="search" name="search-2" id="search-2" value="" /> 
</div>

來源

2014-01-21 12:30:30 vbotio

不工作，它不搜索任何東西.. – yat0

感謝您的幫助反正 – yat0

jquery手機 - 如何表+搜索欄

回答

相關問題