Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"
       data-url="http://issues.wenzhixin.net.cn/examples/bootstrap_table/data"
       data-pagination="true"
       data-side-pagination="server"
       data-page-list="[5, 10, 20, 50, 100, 200]"
       data-search="true"
       data-height="300">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>

JavaScript

$(function () {
		var start_query = '20';
    
    $('#table').bootstrapTable({
         queryParams: function(params){
            if(start_query){
                $('.bootstrap-table').find('.search input').val(start_query)
                params['search'] = start_query
                start_query = null
            }
            return params
        }
    });
    
});