bootstrap對錶格datatable的應用 Datatable 簡單的基本配置

接上一篇文章，做好表格後的效果圖：

問題是表格過長，而且未來還有可能增加更多的顯示。怎麼做才能更好的展示呢？

bootstrap裏有一個advance table的一個東西，官方範例使用：https://datatables.net/

使用後的效果：

可以看到最大的優點是有了可摺疊的表框，支持縮放。同時還能控制頁數、支持搜索。真的很棒

這裏分享一個在使用中遇到的問題：

這個表單的優化很好做，就是事先有一個表單，然後在js里加上這一句話就好：

 <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true
        });
    });
    </script>  

但是，我是動態的往表格裏寫入數據。並不是一個提前就做好的靜態表。所以新加入的數據的行並沒有更改格式。一開始我以爲問題是出在這句話

$(document).ready(function()

因爲這個的意思是等組件都加載完成後再執行。所以改到了添加數據的後面。還是不行。

可能我這個並不是完美的解決方法吧，但是這樣做確實解決了問題：

1.表格裏需要最少需要一組靜態數據，不能完全空，爲了好看可以將這個數據隱藏。

 <tr class="gradeX" style="display:none"> 
	   <td>test</td>
           <td>CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td> 
           <td>5</td> 
           <td>0</td> 
           <td class="center">CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td> 
           <td class="center">CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td> 
           <td>lastest</td> 
           <td>lastest</td> 
          </tr> 

2.在新增數據後再單獨調用函數，把整個table的style更改。

<script>
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:	
			//alert(xhttp.responseText);
			var note=JSON. parse(xhttp.responseText);
			for(var key in note){
					var table = document.getElementById("TITANRelease");
					var tr = table.insertRow(1);
					var date=new Date();
					tr.insertCell(0).innerText=note[key].time;
					tr.insertCell(1).innerText=note[key].TITANRelease;
					tr.insertCell(2).innerText=note[key].RAPCell;
					tr.insertCell(3).innerText=note[key].multiRAP;
					tr.insertCell(4).innerText=note[key].titanmain;
					tr.insertCell(5).innerText=note[key].oam;
					tr.insertCell(6).innerText=note[key].redis;	
					tr.insertCell(7).innerText=note[key].iphyUte;					
				}
			addTR();
			}
			
		};
		xhttp.open("GET", "http://10.140.160.64:3000/servers/titan-releases", true);
		xhttp.send();
	function addTR(){
	                         $('#TITANRelease')
				.addClass( 'nowrap' )
				.dataTable( {
					responsive: true,
					columnDefs: [
						{ targets: [-1, -3], className: 'dt-body-right' }
					]
				} );
	}

這裏我把更改table樣式的方法單獨封裝，在每次取出數據，並創好tr並加入table之後，最後在調用它。

使用之後除了多了一組無用的數據外，這個 表格自帶的排序、搜索、分頁都可以使用，目前沒有發現bug。

Datatable 簡單的基本配置

$(document).ready(function() {

    $('#example').dataTable({

"sScrollX": "100%",   //表格的寬度

  "sScrollXInner": "110%",   //表格的內容寬度

  "bScrollCollapse": true,  //當顯示的數據不足以支撐表格的默認的高度時，依然顯示縱向的滾動條。(默認是false) 

"bPaginate": true,  //是否顯示分頁

  "bLengthChange": true,  //每頁顯示的記錄數

  "bFilter": true, //搜索欄

  "bSort": true, //是否支持排序功能

  "bInfo": true, //顯示錶格信息

  "bAutoWidth": false,  //自適應寬度

  "aaSorting": [[1, "asc"]],  //給列表排序 ，第一個參數表示數組 (由0開始)。1 表示Browser列。第二個參數爲 desc或是asc

  "aoColumns": [

      null,

      null,

      {

          "bVisible": true, //不可見

          "bSearchable": false, //參與搜索

      },

      null,

      null

  ], //列設置，表有幾列，數組就有幾項

   "bStateSave": true, //保存狀態到cookie *************** 很重要 ， 當搜索的時候頁面一刷新會導致搜索的消失。使用這個屬性就可避免了

  "sPaginationType": "full_numbers", //分頁，一共兩種樣式，full_numbers和two_button(默認)

  "oLanguage": {

      "sLengthMenu": "每頁顯示 _MENU_ 條記錄",

      "sZeroRecords": "對不起，查詢不到任何相關數據",

      "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",

      "sInfoEmtpy": "找不到相關數據",

      "sInfoFiltered": "數據表中共爲 _MAX_ 條記錄)",

      "sProcessing": "正在加載中...",

      "sSearch": "搜索",

      "sUrl": "", //多語言配置文件，可將oLanguage的設置放在一個txt文件中，例：Javascript/datatable/dtCH.txt

      "oPaginate": {

          "sFirst":    "第一頁",

          "sPrevious": " 上一頁 ",

          "sNext":     " 下一頁 ",

          "sLast":     " 最後一頁 "

      }

  }, //多語言配置

 "bJQueryUI": false, //可以添加 jqury的ui theme  需要添加css

       "aLengthMenu": [[10, 25, 50, -1, 0], ["每頁10條", "每頁25條", "每頁50條", "顯示所有數據", "不顯示數據"]]  //設置每頁顯示記錄的下拉菜單

    });

});

直接調用默認的設置

$('#example').dataTable();