引入 JQ 和 bootstrap 的cnd

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/
jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
 
 crossorigin="anonymous">

寫html table的樣式

<style>
    th{
        color: #fff;
    }
</style>

<div class="row">
    <div class="col">
        <div class="card card-body">
            <input id="search-input" class="form-control" type="text" >
        </div>
 

    </div>
</div>

table資料準備

 var myArray =[
        {'name':'kk','age':'12','birthdate':'12/11/1999'},
        {'name':'Michaela','age':'12','birthdate':'12/11/1999'},
        {'name':'Michaela2','age':'12','birthdate':'12/11/1999'},
        {'name':'Michaela3','age':'12','birthdate':'12/11/1999'},
        {'name':'Michaela4','age':'12','birthdate':'12/11/1999'},
    ];
 

一

函式迴圈

　　var是對變數的宣告

　　table.innerHTML是引入一行物件

   buildTable(myArray);

    function buildTable(data){
        var table = document.getElementById('myTable');
        table.innerHTML = ``;
        for (var i = 0; i< data.length; i++){
            var row = `<tr>
                            <td>${data[i].name}</td>
                            <td>${data[i].age}</td>
                            <td>${data[i].birthdate}</td>
                       </tr>`;
            table.innerHTML +=row
        }
    }

資料的引入也可以

選擇呼叫Ajax埠的API進行

　　$.ajax({})格式不能變化

　　get的方式獲取資料

　　console.log 是除錯用的

 $.ajax({
        url: "https://reqres.in/api/users",
        method:'GET',
        success:function (response) {
            myArray = response.data
            buildTable(myArray)
            console.log(myArray)
        }
    })

然後清空陣列 myArray = []

二

增加搜尋框

<div class="row">
    <div class="col">
        <div class="card card-body">
            <input id="search-input" class="form-control" type="text" >
        </div>
    </div>
</div>

對應搜尋框的ID=“search-input”進行定義（即使用時會自動觸發）

　　.on(‘keyup‘)是金鑰

　　consol.log除錯

　　serchform函式是自己定義的

 $('#search-input').on('keyup',function(){
        var value = $(this).val()
        console.log('Value:',value)
        var data = searchform(value,myArray)
        buildTable(data)
    });

search-form 目的返回一個已經經過篩選的陣列，

　　value為自己打字出來的 再和myArray相比較

　　.toLowerCase()轉化為可以通用的小寫

 function searchform(value,data){
        var filteredData = []

        for (var i = 0;i< data.length; i++){
            value = value.toLowerCase()
            var name = data[i].name.toLowerCase()
            if (name.includes(value)){
                filteredData.push(data[i])
            }
        }

        return filteredData
    }

三

表單排序

為每一列物件增加自定義屬性data-column data-order 目的是進行判斷

<table class="table table-striped">
    <tr class="bg-info">
        <th data-column="name" data-order="desc">Name &#9650</th>
        <th data-column="age" data-order="desc" >Age &#9650</th>
        <th data-column="birthdate" data-order="desc">Birthdate &#9650 </th>
    </tr>
    <tbody id="myTable">

    </tbody>
</table>

增加事件 - 通過點選click表標題觸發排序

　　定義 column order 定義text 是為了三角形圖表的轉化

　　myArray 用的js的排序演算法

$('th').on('click', function(){
            var column = $(this).data('column')
            var order = $(this).data('order')
            var text = $(this).html()
            text = text.substring(0, text.length - 1)

            if(order == 'desc'){
                $(this).data('order', "asc")
                myArray = myArray.sort((a,b) => a[column] > b[column] ? 1 : -1)
                text += '&#9660'

            }else{
                $(this).data('order', "desc")
                myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1)
                text += '&#9650'

            }
            $(this).html(text)
            buildTable(myArray)
        })