Week 10(11/13)

# Week 10(11/13)：Data Tables ## HTML Table 語法介紹： `<tr></tr> //同一行的內容` `<th></th> //表格的標題項目` `<tb></tb> //指表格的一個項目` 範例程式碼： ```html= <table id="myTable" class="display"> <thead>  <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody>  <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table> ``` 更多詳細介紹：https://www.w3schools.com/html/html_tables.asp ## Data Tables data tables算是html table的進階版。範例程式碼： ```html= <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>   <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" /> <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>  <script src="https://www.gstatic.com/charts/loader.js"></script> <script> // https://developers.google.com/chart/interactive/docs/quick_start // Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(init); function init() { // 這個例子使用的試算表是 https://docs.google.com/spreadsheets/d/14O1tvCnp4FozwHnRjwp_e-NQCIYZ2xK6i6jZt8K0cCc/copy // 將上述試算表另存副本後，你要在自己的雲端硬碟將該試算表設定成[知道連結的使用者都能查看]。 // 然後讓程式讀取 https://docs.google.com/spreadsheets/d/瀏覽器網址列上的網址擷取序號部分/gviz/tq?sheet=工作表名稱 // 也就是將下列的 14O1tvCnp4FozwHnRjwp_e-NQCIYZ2xK6i6jZt8K0cCc 更換成自己的檔案序號，以及最後部分指讀取哪個工作表。 var url='https://docs.google.com/spreadsheets/d/14O1tvCnp4FozwHnRjwp_e-NQCIYZ2xK6i6jZt8K0cCc/gviz/tq?headers=0&sheet=最新消息'; var query = new google.visualization.Query(url); query.setQuery('select *'); query.send(processSheetsData); } function processSheetsData(response) { var data = response.getDataTable(); var columns = data.getNumberOfColumns(); var rows = data.getNumberOfRows(); // 表格以DataTable呈現設定class="display order-column" var str = `<table id="myTable" class="display order-column"> <thead> <tr>`; // 此迴圈取得試算表第一列的各欄位標題加以安排呈現 for (var c=0 ; c<columns ; c++) { if (data.getFormattedValue(0,c)=='') columns=c; //可能試算表後面有多欄空白，就要將columns數值訂為到此為止 else if (data.getFormattedValue(0,c)!='*') str += '<th>' + data.getFormattedValue(0,c) + '</th>'; } // 後續的Tag........... str += ` </tr> </thead> <tbody>`; // 此迴圈取得試算表第二列起的資料逐一安排呈現 for (var r=1 ; r<rows ; r++) { str += '<tr>'; // 此迴圈取得試算表第r列的各欄位內容加以安排呈現 for (c=0 ; c<columns ; c++) { if (data.getFormattedValue(0,c)=='*') { // 該欄第一列標題為*就是下一欄的超連結網址 if (data.getFormattedValue(r,c)!="") { str += '<td><a href="' + data.getFormattedValue(r,c) + '" target="_blank">' + data.getFormattedValue(r,c+1) + '</a></td>'; c++; } } else str += '<td>' + data.getFormattedValue(r,c) + '</td>'; } // 後續的Tag... } str += '</tbody></table>'; document.getElementById("demo").innerHTML = str; // 利用DataTable呈現表格 https://datatables.net/manual/installation // initial data table(只要會動的東西都要initial) $(document).ready( function () { //等html全載入後，執行function $('#myTable').DataTable({ //$('#myTable')==document.getElementById(mytable) // Language Plug-in for Chinese-traditional https://datatables.net/plug-ins/i18n/Chinese-traditional.html language: {url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/zh-HANT.json'}, //設定語言，default: English // Disable ordering in the table https://datatables.net/reference/option/ordering // ordering: false // The order parameter https://datatables.net/examples/basic_init/table_sorting.html order: [[0, 'desc']] }); }); } </script> </head> <body> <div id="demo"></div> </body> </html> ``` 更多範例： https://jsbin.com/zahovuvile/edit?html,output https://jsbin.com/widozifeti/edit?html,output 更多詳細資訊： https://datatables.net/manual/installation