# Table 列表的搜索 ### `EpiiAdmin`在`bootstrap-table`的基礎上增加了搜索表單功能，并且搜索表單與table完全隔離，這意味著你可以在頁面的任何一個地方展示表單，只需綁定表單即可實現對表單的搜索。 - 支持多表單對一個列表的搜索 - 支持頁面多個table，并分別設置搜索 ### 務必先仔細閱讀 [`Form章節`](form.md); 在任何一個form表單上只需加上 - `data-form='1'` - `data-search-table-id='1'` 其中 `data-search-table-id` 來指定綁定的`table`。 如果值為`1` 則默認為第一個table。推薦使用table的具體id。 >[warning] 提醒：當綁定table后，在form中不要設置action屬性。 >[info] 搜索變量的傳遞方式默認追加到post請求中。 例1， ```html <form role="form" class="form-inline" data-form="1" data-search-table-id="1"> <div class="form-group"> <label>名稱：</label> <input type="text" class="form-control" name="name1" placeholder="請輸入名稱" required> </div> <div class="form-group"> <label>名稱2：</label> <input type="text" class="form-control" name="name2" placeholder="請輸入名稱"> </div> <div class="form-group"> <label>名稱3：</label> <input type="text" class="form-control" name="name3" placeholder="請輸入名稱"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">提交</button> <button type="reset" class="btn btn-default">重置</button> </div> </form> ``` 程序會自動在table增加表單的字段到post數據中。 操作視頻 <p> <video controls="controls" width="100%" src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table20.mov"></video> </p> 支持[`Form章節`](form.md)的所有功能，以`data-before-submit="confirm"`為例： ```html <form role="form" class="form-inline" data-form="1" data-search-table-id="1" data-before-submit="confirm" data-msg="您確定要搜索嗎？" data-title="自定義標題" data-btn-ok="繼續搜索" data-btn-cancel="我不搜索" data-intop="1"> <div class="form-group"> <label>名稱：</label> <input type="text" class="form-control" name="name1" placeholder="請輸入名稱" required> </div> <div class="form-group"> <label>名稱2：</label> <input type="text" class="form-control" name="name2" placeholder="請輸入名稱"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">提交</button> <button type="reset" class="btn btn-default">重置</button> </div> </form> ``` 操作視頻 <p> <video controls="controls" width="100%" src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table21.mov"></video> </p>