ขอความช่วยเหลือพี่ๆ หน่อยครับ DataTable มีปัญหาครับ

พอดีว่าผมต้องการ loop ข้อมูลลงตาราง โดยใช้ jquery ครับ เเต่ติดปัญหาคือ มันค้นหาข้อมูลในตารางไม่ได้ครับ error ใน console ก็ไม่มี ข้อมูลก็มาหมดครับ เเต่ถ้าเป็น php loop ข้อมูลลงตาราง DataTable กับใช้ได้ปกติครับ พี่ๆช่วยชี้เเนะปัญหาทีครับ ขอบคุณครับ

 
ปล. ภาพด้านบนใช้ jquery loop ข้อมูลลงตาราง ครับ

<-- HTML -->
    <table class="display text-center" id="myTable">
        <thead id="thead-bg">
            <tr>
                <td>#</td>
                <td>ชื่อ</td>
                <td>นามสกุล</td>
                <td>เพศ</td>
                <td>action</td>
            </tr>
        </thead>
        <tbody id="display-student-data">
            <!--  -->
        </tbody>
    </table>

< --JS-- >
    (function() {
        let tbody = ``;
        let rowNum = 1;
        $.ajax({
            type: "GET",
            url: "show_student_data.php",
            dataType: "json",
            success: function(resp) {

                $('#myTable').DataTable();

                resp.forEach(function(student, i) {
                    tbody = `
                        <tr>
                            <td>${rowNum}</td>
                            <td>${student.fname}</td>
                            <td>${student.lname}</td>
                            <td>${student.gender}</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm" onclick="btnShow(${student.stu_id})">ดูข้อมูล</button>
                                <button type="button" class="btn btn-secondary btn-sm" onclick="btnEdit(${student.stu_id})">เเก้ไข</button>
                                <button type="button" class="btn btn-danger btn-sm" onclick="btnDelete(${student.stu_id})">ลบ</button> 
                            </td>
                        </tr>
                    `;
 
                    $('#display-student-data').append(tbody);
                    rowNum++;
                });
            }
        });
    })();