bootstrapTable format, parameter transfer, search

bootstrapTable format

//bootstrapTable data table echo
function doQuery(){
	var curPage = 1;
	var pageSize = 10 ;
	
		$('#tbl_faultcase').bootstrapTable({
		url : '${ctx}/qcmtt/ajax/getdivfaultdiag2',
		method: 'POST', //Request method (*)
		contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
		striped: true, //whether to display line interval color
		cache: false, //whether to use the cache, the default is true, so in general, you need to set this property (*)
		pagination: true, //whether to display pagination (*)
		sortable: false, //whether to enable sorting
		sortOrder: "asc", //sort method
		sidePagination: "server", //Pagination method: client paging, server server paging (*)
		search: false, //Whether to display the form search, this search is a client-side search and will not enter the server, so I personally feel that it is of little significance
		strictSearch: false,
		pageSize : pageSize,
		showHeader : true,
		showColumns: false, //whether to show all columns
		showRefresh: false, //whether to show the refresh button
		minimumCountColumns: 2, //minimum allowed number of columns
		clickToSelect: true, //Whether to enable click to select rows
		detailView: false,
		pageList:[10],
		onPageChange:function(number,size){
			curPage = number; //Number of pages
			pageSize = size; // number of bars displayed per page
		},
		queryParams: getParams,//carry parameters
		columns : [
					{
						title : 'Fault number',
						field : 'faultCode',
						sortable : true,
						align : 'center'
					},
					{
						title : 'Fault type',
						field : 'faultType',
						sortable : true,
						align : 'center'
					},
					{
						title : 'Fault name',
						field : 'faultName',
						align : 'center'
					},
					{
						title : 'Faulty machine',
						field : 'unitName',
						sortable : true,
						align : 'center'
					},
					{
						title : 'Failure level',
						field : 'faultDegree',
						sortable : true,
						align : 'center',
						formatter : function(value, row, index) {
							if (row['faultDegree'] == 'heavy') {
								return 'serious';
							}
							if (row['faultDegree'] == 'normal') {
								return 'general';
							}
							if (row['faultDegree'] == 'light') {
								return 'slight';
							}
						}
					},
					{
						title : 'Location',
						field : 'happenPlace',
						align : 'center'
					},
					{
						title : 'When it happens',
						field : 'happenOccasion',
						align : 'center'
					},
					{
						title : 'Operation',
						field : 'id',
						align : 'center',
						formatter : function(value, row, index) {
							var html = "";
							html += '<a type= "button" class="btn btn-danger btn-sm" onclick = "deleteFaultCase(\''
									+ value
									+ '\');">delete</a>';
							html += '   ';
							html += '<a type="button" class="btn btn-primary btn-sm"  onclick = "showFaultCaseModify(\''
									+ value
									+ '\');">Modify</a>';
							return html;
						}
					},
				]
			   
	});
		
	function getParams(params){
		var temp = {
			faultName : $('#faultNameSearch').val(),//Search condition
			curPage:(params.offset/params.limit) + 1 ,
			pageSize:pageSize,
		}
		return temp;
	}
	
}




//Search is also refresh
function doSearch () {
	$('#tbl_faultcase').bootstrapTable('refresh');
}

 

• Implementation idea: Get all the objects in the query block and store them dynamically in the parameters returned by the query. 
  Note: 
  When the query has no value, it cannot be put into the query parameters, otherwise the data will be queried as empty, resulting in the inability to query to data

function queryParams(params) {
    var param = {};
    $('#query-form').find('[name]').each(function () {
        var value = $(this).val();
        if (value != '') {
            param[$(this).attr('name')] = value;
        }
    });

    param['pageSize'] = params.limit;   //页面大小
    param['pageNumber'] = params.offset;   //页码

    return param;
}

function customSearch(text) {
    $table.bootstrapTable('refresh');//刷新Table，Bootstrap Table 会自动执行重新查询
}

• Implementation idea of ​​reset function 
  : loop to get the control of query-form and set its value to empty

function resetSearch() {
    $('#query-form').find('[name]').each(function () {
        $(this).val('');
    });
}