Bootstrap Table获取并展示数据列表

参考文档

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

具体实现

引入js文件

<script src="js/bootstrap-table.js" type="text/javascript"></script>
<script src="js/bootstrap-table-zh-CN.js" type="text/javascript"></script>

js代码

function submitFormForTable(obj){
    loadData("#merchant_query_form","#list_table");
}
function loadData(formId, tableId){
	$(tableId).bootstrapTable('destroy'); // 清除缓存表格数据
	$(tableId).bootstrapTable({
		striped: true, // 隔行变色
		url: $(formId).attr("action")+"?random="+Math.random(),
		method: "post",
		dataType: "json",
	    pagination: true, //分页
	    sidePagination: "server", //服务端处理分页
	    pageNumber:1, // 默认显示第几页
	    pageSize: 10, // 每页显示条数
//	    sortable: false, 
//	    cache: false, // 默认true 设置为 false 禁用 AJAX 数据缓存
	    contentType : "application/x-www-form-urlencoded", // 参数提交类型，默认以application/json提交
	    queryParams:function(params){
	    	$(formId).find("input[name]").each(function(){
	    		params[$(this).attr("name")]=$(this).val();
	    	});
	    	return params;
	    }, // 请求参数
//	    responseHandler:function(res){ // res为从服务器请求到的数据
//	    	return res;
//	    },
	    columns: [ // 渲染列
                  {
                	  title: 'ID',
                      field: 'id',
                      align: 'center',
                      valign: 'middle',
                  }, 
                  {
                      title: '姓名',
                      field: 'name',
                      align: 'center',
                      valign: 'middle',
                  }, 
                  {
                      title: '年龄',
                      field: 'age',
                      align: 'center'
                  },
                  {
                      title: '开始时间',
                      field: 'create_time',
                      align: 'center',
                  },
                  {
                      title: '修改时间',
                      field: 'update_time',
                      align: 'center',
                  },
                  {
                      title: '操作',
                      field: 'id',
                      align: 'center',
                      formatter:function(value,row,index){  
		                   var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> ';  
		                   var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> ';  
		                   return e+d;  
                      } 
                  }
              ]
	});
}

html代码

<button class="btn btn-default" type="button" onclick="submitFormForTable(this);">提交</button>

效果图示