Custom Search Rendering for Individual Fields#
selectpage search example: replace customerID as needed
// After rendering the common search
table.on('post-common-search.bs.table', function (event, table) {
var form = $("form", table.$commonsearch);
$("input[name='customerID']", form).addClass("selectpage").data("source", "customer/customer/index").data("primaryKey", "id").data("field", "charname").data("orderBy", "id desc");
Form.events.cxselect(form);
Form.events.selectpage(form);
});
Exclude search example: replace mid as needed
// After rendering the common search
table.on('post-common-search.bs.table', function (event, table) {
var form = $("form", table.$commonsearch);
let html = '<!--Explicit operate operator-->\n' +
' <div class="input-group">\n' +
' <div class="input-group-btn">\n' +
' <select class="form-control operate" data-name="mid" style="width:60px;">\n' +
' <option value="=" selected>Equals</option>\n' +
' <option value="<>">Exclude</option>\n' +
' </select>\n' +
' </div>\n' +
' <input class="form-control" type="text" name="mid" id="mid" placeholder="" value=""/>\n' +
' </div>'
$("input[name='mid']", form).parent().html(html);
});
Development Example: Custom Search Form Template searchFormTemplate#
searchFormTemplate
table.bootstrapTable({
...omitted
searchFormVisible: true,
searchFormTemplate: 'customformtpl',
...omitted
})
Corresponding Template
<script id="customformtpl" type="text/html">
<!--The form must have the class form-commsearch-->
<form action="" class="form-commonsearch">
<div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
<h4>Custom Search Form</h4>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label">ID</label>
<!--Explicit operate operator-->
<div class="input-group">
<div class="input-group-btn">
<select class="form-control operate" data-name="id" style="width:60px;">
<option value="=" selected>Equals</option>
<option value=">">Greater than</option>
<option value="<">Less than</option>
</select>
</div>
<input class="form-control" type="text" name="id" placeholder="" value=""/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label">Title</label>
<!--Implicit operate operator, must have a hidden text box with class operate and data-name="field", value as operator-->
<input class="operate" type="hidden" data-name="title" value="="/>
<div>
<input class="form-control" type="text" name="title" placeholder="Enter the title to search" value=""/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label"></label>
<div class="row">
<div class="col-xs-6">
<input type="submit" class="btn btn-success btn-block" value="Submit"/>
</div>
<div class="col-xs-6">
<input type="reset" class="btn btn-primary btn-block" value="Reset"/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</script>
Table Custom Search Extension, Dropdown Search Operators#
- Add operate: 'number' to the table field to customize search for equals, greater than, and less than
- Add number condition in public/assets/js/bootstrap-table-commonsearch.js
Specific link