BSTable İle Html Tabloları Düzenlenebilir Yapmak

Melih SAFRAN
23 Ağustos 2022 • 20 dakikalık okuma

BSTable Html jQuery Html Tablo Düzenlenebilir Html Tablo BSTable Eklentisi BSTable Editable Html Table

BSTable JavaScript eklentisi ile, statik HTML tablolara dinamik olarak verilerini güncelleme özelliği kazandırılabilir.

Kod

Html tabloları dinamik hale getirmek için; BSTable JavaScript eklentisi indirilir ve bstable.js dosyası html dosyasına eklenir. Sonrasında aşağıdaki örnek kodda olduğu gibi tablo özellikleri ayarlanır;

Kod

Html tablo verileri harici bir api ya da web servisten alınarak tüm verilerde düzenleme, ekleme, silme ve güncelleme işlemleri yapılabilir. Örneğin; jsonplaceholder.typicode.com/users api servisinden örnek data çekiliyor;

**Resim 4.** BSTable Dinamik Html Tablo Verileri

**Resim 5.** BSTable Dinamik Html Tablo Verilerin Örnek API Servisten Alınması

**Resim 6.** BSTable Dinamik Html Tablo Verilerin Düzenlenmesi

**Resim 7.** BSTable Dinamik Html Tablo Verilerin Silme Onayı

**Resim 8.** BSTable Dinamik Html Tablo Verilerin Silinmesi

**Resim 9.** BSTable Dinamik Html Tablo Yeni Satır Eklenmesi

**Resim 10.** BSTable Dinamik Html Tablo Yeni Satır Kaydedilmesi

Aşağıdaki örnek kodda olduğu gibi tablonun düzenleme, silme, güncelleme, yeni satır ekleme gibi her işlem adımındaki verilere ulaşılabilir, ilgili veriler web servise gönderilebilir;

Kod

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>BSTable</title>

    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

</head>

<body id="page-top" class="sidebar-toggled">
    <div role="main" class="container" style="padding-top:60px;">
        <div style="margin-top:20px;">
            <h2>BSTable</h2>

            <button id="table2-new-row-button" class="btn btn-dark">Yeni Satır</button>
            <table class="table table-striped table-bordered" id="table2">
                    <thead class="thead-dark">
                        <tr>
                        <th scope="col">Sıra</th>
                        <th scope="col">ID</th>
                        <th scope="col">Ad Soyad</th>
                        <th scope="col">Email</th>
                        <th scope="col">Adres</th>
                        </tr>
                    </thead>
                    <tbody id="table2-body">
                    </tbody>
            </table>

        </div>
    </div>

    <script src="bstable.js"></script>
    <script>

        var lastOrderingValue = 0;
        var deletedRowID = 0;
        function getUsers(){
            $.get('https://jsonplaceholder.typicode.com/users')
                .done(resultData => {
                    console.log("resultData: ", resultData)

                    for(var i = 0; i < resultData.length; i++) {

                        lastOrderingValue = i + 1;
                        var item = '<th scope="row">'+ lastOrderingValue +'</th><td>' + resultData[i].id +'</td><td>' + resultData[i].name + '</td><td>' + resultData[i].email +'</td><td>' + resultData[i].address.city +'</td>'

                        let row = document.createElement("tr");
                        row.innerHTML = item;
                        document.getElementById("table2-body").append(row);

                    }
                    bsTable2.init();
                })
                .fail(errorMessage => console.log("errorMessage", errorMessage));
        }

        var bsTable2 = new BSTable("table2", {
            editableColumns:"1,2",
            $addButton: $('#table2-new-row-button'),
            onEdit:function(rowElement) {
                console.log("EDITED:", rowElement);
                var cols = rowElement.childNodes;
                var tableRowData = getTableData(cols);

                $.post("https://jsonplaceholder.typicode.com/users", tableRowData, function(responseData) {
                    console.log("responseData: ", responseData);
                });
            },
            onBeforeDelete: function(rowElement){
                console.log("onBeforeDelete: ", rowElement);
                deletedRowID = parseInt(rowElement[0].childNodes[1].innerText);
                console.log("deletedRowID", deletedRowID);
            },
            onDelete: function() {
                console.log("onDelete");
                console.log("deletedRowID", deletedRowID);
                $.ajax({
                    type: 'DELETE',
                    url: 'https://jsonplaceholder.typicode.com/users/' + deletedRowID,
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(responseData){
                        console.log('İstek gönderildi. Gelen yanıt: ', responseData);
                        reorderRows();
                    },
                    error: function(errorMessage){ console.log('Hata oluştu: ', errorMessage); } // An error occurred during the request.
                });
            },        // Called after deletion
            onAdd: function() {
                console.log("onAdd");
                lastOrderingValue++;
                var table2 = document.getElementById("table2");
                table2.rows[table2.rows.length-1].cells[0].innerText = lastOrderingValue;
            },         // Called when added a new row
            advanced: {
                confirmQuestion: 'Bu satırı silmek istediğinizden emin misiniz?',
                columnLabel: ''
            }
        });

        function reorderRows(){
            // reorder rows
            var table2ths = document.getElementById("table2-body").getElementsByTagName("th");
            console.log("table2ths", table2ths);
            lastOrderingValue = 0;
            for(var i=0; i<table2ths.length; i++)
            {
                lastOrderingValue++;
                table2ths[i].innerText = lastOrderingValue;
                //console.log("table2row", table2ths[i].innerText);
            }
        }

        function getTableData(cols){
            var data = {};
            for(var i = 1; i < cols.length-1; i++){
                switch(i){
                    case 1:
                        data.id = cols[i].innerText;
                        break;
                    case 2:
                        data.name = cols[i].innerText;
                        break;
                    case 3:
                        data.email = cols[i].innerText;
                        break;
                    case 4:
                        data.address = {};
                        data.address.city = cols[i].innerText;
                        break;
                    default:
                        break;
                }
            }
            console.log("data", data);
            return data;
        }

        getUsers();

    </script>
</body>
</html>

CraftingGamerTom/BSTable Javascript library to make HMTL tables editable , github.com/CraftingGamerTom/bstable, 19.08.2022 tarihinde alındı.
melihsafran/BSTable Javascript library to make HMTL tables editable , github.com/melihsafran/bstable, 23.08.2022 tarihinde alındı.

Feragatname

BSTable Html jQuery Html Tablo Düzenlenebilir Html Tablo BSTable Eklentisi BSTable Editable Html Table

BSTable İle Html Tabloları Düzenlenebilir Yapmak

Örnek Statik Html Tablo Oluşturma

Kod

Statik Html Tabloyu Dinamik Hale Getirme

Kod

Tablo Bilgilerini Dinamik Olarak Html Tabloya Bağlamak

Kod

Kaynaklar

Beğen