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="#" οnclick="edit(\''+ row.id + '\')">編輯</a> ';  
		                   var d = '<a href="#" mce_href="#" οnclick="del(\''+ row.id +'\')">刪除</a> ';  
		                   return e+d;  
                      } 
                  }
              ]
	});
}

html代碼

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

效果圖示