如何使用jq实现bootstrapTable以及使用其他搜索框控制bootstrapTable中的搜索

1.简单使用bootstrapTable

先上图

html

<table class="table table-bordered" id="accountTable"></table>

// 引入js 可以先下载到本地
<link rel="stylesheet" href="/bootstrap/plugins/bootstrap-table-1.12/bootstrap-table.css">
    <link rel="stylesheet" href="/bootstrap-table-1.12/bootstrap-table-fixed-columns.css">
    <script src="/bootstrap/plugins/bootstrap-table-1.12/bootstrap-table.js"></script>
    <script src="/bootstrap/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="/bootstrap/plugins/bootstrap-table-1.12/bootstrap-table-zh-CN.js"></script>
    <script src="/bootstrap/plugins/bootstrap-table-1.12/bootstrap-table-fixed-columns.js"></script>
		//表头数据目前是写死的
        var columnNameJosn = [{
            field:'username',
            title:'账号'
        },{
            field:'password',
            title:'密码'
        },{
            field:'cId',
            title:'所属人xxx'
        },{
            field:'create_time',
            title:'创建xxxx'
        },{
            field:'update_time',
            title:'修改时间'
        },{
            field:'operation',
            title:'操作',
            formatter: function (value,row,index) {   //一些操作相当于是插槽
                return '<a><span id="edit_account" data-id="'+row.id+'">编辑</span></a><a><span id="delete_account" data-id="'+row.id+'">删除</span></a>';
            }
        }]
		var $table = $('#accountTable');
		$(function (){
            //1.初始化Table
            oTable = new TableInit();
            oTable.Init();
        })
		var TableInit = function () {
            var oTableInit = new Object();
            oTableInit.Init = function () {
                $table.bootstrapTable(
                    params = {
                        locale: BW8i18n.getLocale() === 'en_US' ? 'en-US' : 'zh-CN',
                        toolbarAlign:'right',
//                        width:'20px',
                        classes:' table  table-responsive',
                        url: '../url',         //请求后台的URL（*）
                        method: 'get',                      //请求方式（*）
                        toolbar: '#toolbars',                //工具按钮用哪个容器
                        striped: false,                      //是否显示行间隔色
                        height: 580,                         //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度  加了height 会决定表头根据文章动不动
                        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                        pagination: true,                   //是否显示分页（*）
                        sortable: false,                     //是否启用排序
                        contentType: 'application/x-www-form-urlencoded',
                        sortOrder: "asc",                   //排序方式
                        silent:true,
                        queryParams: oTableInit.queryParams,//传递参数（*）
                        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                        "queryParamsType": "limit",
                        pageNumber:1,                       //初始化加载第一页，默认第一页
                        pageSize: 10,                       //每页的记录行数（*）
                        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                        search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                        strictSearch: true,                   // true为全匹配搜索 否则为模糊搜索
                        iconSize:'medium',
                        cookieStorage:'localStorage',
                        showColumns: false,                  //是否显示所有的列
                        showRefresh: false,                  //是否显示刷新按钮
                        minimumCountColumns: 2,             //最少允许的列数
                        clickToSelect: false,                //是否启用点击选中行
                        // height:$(window).height()-100;
                        uniqueId: "ticketId",                 //每一行的唯一标识，一般为主键列
                        showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
                        cardView: false,                    //是否显示详细视图
                        detailView: false,                   //是否显示父子表
                        showExport: "",                     //是否显示导出
                        exportDataType: "all",              //basic', 'all', 'selected'.
                        idField:"tId",
                        columns:columnNameJosn,
                        // //自定义行属性
                        // rowAttributes: function(row,index){
                        //     return {tid: row.tId};
                        // },
                        onLoadSuccess:function (data) {
                            //todo:接口接通以后需要的操作
                        },
                        onLoadError:function ( status, jqXHR){
                            // 接口失败
                        },
                    }
                );
            };
            //搜索功能
            oTableInit.queryParams = function (params){
                params.search   = $('input[name="search_ID"]').val();  //搜索参数必须是固定的 这是搜索
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    search:params.search,//搜索内容
                    limit: params.limit,   //页面大小
                    offset: params.offset,  //页码
                };
                return temp;
            };
            return oTableInit;
        };

2.利用其他搜索框控制bootstrapTable中的搜索

如上图 点击查询 需要在 bootstrap-table.js中新写入的自定义搜索方法 如果不想用自带的搜索 可以点击按钮触发将搜索字段改为新写的搜索框内容

//查询
        $('#search_change_ID').on('click',function (){
            var keyvalue = $('input[name="search_ID"]').val();  //输入框的内容
            // 在bootstrap-table-1.12 下的bootstrap-table.js中新写入的自定义搜索方法 如果不想用自带的搜索 可以点击按钮触发搜索 将搜索字段改为新写的搜索框内容
            //注意：改的时候必须改对引入的js
            $table.bootstrapTable("loadAddSearch", keyvalue);
        })

bootstrap-table.js
先找到js文件里面的resetSearch 方法 在下面写入新方法

BootstrapTable.prototype.loadAddSearch = function (text) {
        this.onCustomizeSearch(text);
    };
    BootstrapTable.prototype.onCustomizeSearch = function(text) {
        this.searchText = text;
        this.options.searchText = text;
        this.options.pageNumber = 1;
        this.initSearch();
        this.updatePagination();
        this.trigger('search', text);
    };