【实用】使用Bootstrap构建表格及表格的分页，刷新等操作

              在我们开发项目当中经常会使用到很多插件，它们能够加快我们项目开发进度，特别是前端页面的展示控件有很多种类的，目前给大家介绍项目中经常使用到一种插件------bootstrap的表格构建及相关使用要点，希望对大家有所帮助

 

       不用多说直接上代码~

 

JavaScript代码

//初始化grid
			function InitTable() {
				var oTableInit = new Object();
			    //初始化Table 
			    $("#table").bootstrapTable('destroy');
			    $('#table').bootstrapTable({
			        url: 'StudentFileController/StudentFileController_listPage.do',   //请求后台的URL（*） 
			        method: 'post',        //请求方式（*） 
			        contentType:"application/x-www-form-urlencoded; charset=UTF-8",
			        toolbar: '#toolbar',  //工具按钮用哪个容器 
			        striped: true,        //是否显示行间隔色 
			        //cache: false,         //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） 
			        pagination: true,     //是否显示分页（*） 
			        //sortable: true,       //是否启用排序 
			        //sortOrder: "asc",     //排序方式 
			        queryParams: Search,
			        paginationShowPageGo: true, 
			        sidePagination: "server",     //分页方式：client客户端分页，server服务端分页（*） 
			        pageNumber: 1,                //初始化加载第一页，默认第一页 
			        pageSize: 10,                 //每页的记录行数（*） 
			        pageList: [5, 10, 25, 50, 100],  //可供选择的每页的行数（*） 
			        //search: false,                //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 
			        //strictSearch: true,
			        showColumns: true,      //是否显示所有的列 
			        //showRefresh: true,     //是否显示刷新按钮 
			        //minimumCountColumns: 1, //最少允许的列数 
			        clickToSelect: true,    //是否启用点击选中行 
			        height: $(window).height()*0.825,            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 
			        singleSelect : false,	//是否单选
			        columns: [{
			        	field: '',
			            title: '',
			            checkbox: true,
    		            formatter:function(value,row,index){
    		            	return '<div style="width:30px;"></div>'
    		            }
			        },  {
			            field: 'name',
			            title: '学生姓名',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:80px;">'+value+'</div>'
    		            }
			        },{
			            field: 'sex',
			            title: '性别',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "-