最近因為要寫一個簡單的頁面，用於展示資料並有匯出功能，就立馬想到了bootstrap-table，因為它簡單，封裝比較好，更重要的是，個人看著比較好看。

1.首先引用必須的檔案

	<!--引入jquery元件 -->
    <script src="../assets/jquery.min.js"></script>	
    
    <!--引入bootstrap3元件 -->
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    
    <!--引入bootstrap-table元件 -->
    <link rel="stylesheet" href="../assets/bootstrap-table/bootstrap-table.css">
    <script src="../assets/bootstrap-table/bootstrap-table.js"></script>
    <link rel="stylesheet" href="../assets/examples.css">
    	
    <!--引入bootstrap匯出功能元件 -->
    <script src="../js/bootstrap-table-export.js"></script>
    <script src="../js/tableExport.js"></script>
 

2.再寫html

        <div class="form-inline" id="toolbar">
        	<div class="col-sm-4">
        		<div class="dropdown">
        			<select id="tableType" class="form-control" >
						<option value="">景區遊客出行方式(省內)</option>
	
		     	  	</select>
				</div>
        	</div>
        	<div class="col-sm-4">
        		<div class='input-group date col-sm-12' id='datetimepicker1'>  
	                <input type='text' class="form-control" />  
	                <span class="input-group-addon">  
	                    <span class="glyphicon glyphicon-calendar"></span>  
	                </span>
           		 </div>
        	</div>
        	<div class="col-sm-2">
    			<button id="btn_select" type="button" class="btn btn-default">
                	<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查詢
            	</button>
        	</div>
			<div class="col-sm-2">
				<select id="sel_exportoption" class="form-control">
		            <option value="">匯出本頁</option>
		            <option value="all">匯出全部</option>
		            <option value="selected">匯出選中</option>
	     	  	</select>
			</div>
        </div>
        <table id="tb_departments">
        	<thead>
        		<tr>
				    <th data-field="address" data-checkbox="true">ID</th>
				    <th data-field="quxian">使用者名稱</th>
				    <th data-field="tatalnum">真實姓名</th>
				    <th data-field="tataktime">座機</th>
				    <th data-field="moretwonum">手機</th>
				    <th data-field="moretwotime">使用者型別</th>
			    </tr>
        	</thead>
        </table>
    </div>
 

上面效果圖是初始化表格之後的，那就看看怎麼初始化的

3.初始化表格

    		$('#tb_departments').bootstrapTable({
            data:json,
            toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortable: false,                     //是否啟用排序
            sortOrder: "asc",                   //排序方式
            //queryParams: oTableInit.queryParams,//傳遞引數（*）
            sidePagination: "client",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            pageNumber: 1,                       //初始化載入第一頁，預設第一頁
            pageSize: 10,                       //每頁的記錄行數（*）
            pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
            clickToSelect:true,
            showExport: true,                     //是否顯示匯出
            exportDataType: "basic"              //basic', 'all', 'selected'.
        });
 

columns: [{
                checkbox: true
            }, {
                field: 'id',
                title: '地市'
            }, {
                field: 'name',
                title: '區縣'
            } ]

這樣就初始化完了。

遇到的問題：

1.時間控制元件

先引入檔案

    <!--引入bootstrap時間控制元件 -->
    <link rel="stylesheet" href="../js/date3/bootstrap-datetimepicker.min.css"/>
	<script src="../js/moment-with-locales.js"></script>
	<script src="../js/date3/bootstrap-datetimepicker.min.js"></script>

我用的是strap3，就在網上隨便找了個bootstrap時間控制元件，但是不行，在網上搜了搜，原來是因為官網上的時間控制元件都是基於strap2的，所以網上查出來的大多也都是基於2的。那我直接對應版本直接下了個基於3的就行了。

2.check表格問題

剛開始我就按照貼出來的程式碼一樣，結果複選框時預設選中，我以為這是一個屬性呢，就在官網上找找看看有沒有預設不選中的，結果找了半天也沒有，沒辦法了，我就除錯了下程式碼，在js檔案裡面發現了這段程式碼

原來它是這樣初始化列表的，怪不得， 那我看bootstrap-table.js檔案就行了，就發現了這段

                    sprintf(' disabled="%s"', !column.checkboxEnabled ||
                        (value && value.disabled) ? 'disabled' : undefined) +
                    ' />',

data-field="address"  屬性去掉就行了。

bootstrap有很多很多實用又簡單的功能，參考官網就行了點選開啟連結

還有就是遇到問題一定要除錯，看原始碼，這樣才能找到問題的根本原因。