js - איך לעשות אפשריות מיון וסינון לטבלה דינאמית

[mekev]

אשמח לדעת
מנסיון בלבד
(גוגל מלא באינסוף אפשריות, והיות שאני ירוק בתחום, אני מעוניין לקבל חוות דעת שלך, ולא תשובה אקראית)

איך לעשות אפשריות מיון וסינון לטבלה דינאמית (html)

הטבלה נוצרת מקריאה לapi
ונבנית באמצעות jquery

[chv]

@mekev השאלה לא ברורה מספיק,
אבל אם הכוונה היא לאלמנט HTML של טבלה (<table>) אתה יכול לאתחל עליו אובייקט חדש של DataTables, שיאפשר לך להוסיף יכולת חיפוש, סידור, מיון סינון וכו'.
כדי לעשות את זה עליך לייבא את datatables.js לדף, ולאתחל את ה-instance החדש של DataTables על האלמנט הרצוי, עם ההגדרות הרצויות.
הספרייה הזו מתועדת היטב.

[dovid]

אני גם משתמש לרוב עם הספריה שהמליץ @chv,
אבל מעניין אותי החלק של ה"נבנית באמצעות jquery",
כי אחד המוטיבציות לשימוש בספריה הנ"ל היא הקושי בJS לטעון טבלה בנתונים.

[mekev]

@dovid כתב בjs - איך לעשות אפשריות מיון וסינון לטבלה דינאמית:

אבל מעניין אותי החלק של ה"נבנית באמצעות jquery",

זה הקוד

$(document).ready(function () {
   
    function get_data(cookie_string) {
        $("#table-tr").html("");
        $("#table-body").html("");
 
        $.get(`http://000.000.000.000:00/api/view/${cookie_string}`, function (data) {
         
            let cols = Object.keys(data[0]);
            let thead = $(`<thead id = "thead_id" class="thead-dark">`);
            let tr = $(`<tr>`);
            $.each(cols, function (i, item) {
 
                if (item != "id") {
                    let th = $(`<th class="header" >`);
                    th.text(item); 
                    tr.append(th); 
                }                
            });
            thead.append(tr); 
            $("#table").append(tr)
 
            $.each(data, function (i, item) {
 
                let tr = $(`<tr  id = "item.id">`);
                let vals = Object.values(item);
                $.each(vals, (i, elem) => {
                    if (elem != vals[0]) {
                        let td = $(`<td>`);
                        td.text(elem);     
                        tr.append(td); 
                    }                   
                });
 
                $("#table-body").append(tr); 
            });
            $("#table-body").append($("#table-tr")) 
                                    
        });
     
    }   
 
    get_data(document.cookie);
               
});

טרם הצלחתי ליישם את הספריה הנ"ל
איפה אני צריך למקם אותה בjs

[dovid]

async function get_data(cookie_string) {
  const data = await fetch(`http://000.000.000.000:00/api/view/${cookie_string}`).then(x => x.json());
  $('table').DataTable({ data });
}