DataTables DataGrid’ine Satır Kayıtları Ekleme
DataTables, web uygulamalarında veri tablolarını görüntülemek ve yönetmek için kullanılan güçlü bir JavaScript kütüphanesidir. DataTables DataGrid, kullanıcıların satır ekleme, silme ve düzenleme gibi etkileşimli işlemler gerçekleştirmesine olanak tanır. Bu makalede, DataTables DataGrid’ine satır kayıtları eklemenin adım adım bir kılavuzunu sunacağız.
Adım 1: DataTables’ı Sayfaya Dahil Etme
DataTables’ı web sayfanıza dahil etmek için aşağıdaki komut dosyalarını ekleyin:
“`html
“`
Adım 2: Tabloyu Oluşturma
Satır eklemek istediğiniz tabloyu oluşturun. Örneğin:
“`html
| Ad | Soyad | E-posta |
|---|
“`
Adım 3: DataTables’ı Tabloya Başlatma
DataTables’ı tabloya başlatmak için aşağıdaki kodu kullanın:
javascript
$(document).ready(function() {
$('#example').DataTable();
});
Adım 4: Satır Ekleme Düğmesi Oluşturma
Satır eklemek için bir düğme oluşturun. Örneğin:
html
<button id="add-row" class="btn btn-primary">Satır Ekle</button>
Adım 5: Satır Ekleme İşlevini Yazma
Satır ekleme işlevini düğme tıklama olayına ekleyin. Örneğin:
“`javascript
$(‘#add-row’).click(function() {
// Yeni satır verilerini alın
var name = $(‘#name’).val();
var surname = $(‘#surname’).val();
var email = $(‘#email’).val();
// Yeni satırı oluşturun
var newRow = ‘
‘;
// Yeni satırı tabloya ekleyin
$(‘#example’).DataTable().row.add($(newRow)).draw();
});
“`
İpuçları
- Yeni satır verilerini almak için form öğelerini kullanabilirsiniz.
- Satır ekleme işlevini daha özelleştirmek için DataTables API’sini kullanabilirsiniz.
- Satır ekleme işlemini daha kullanıcı dostu hale getirmek için modal pencereler veya açılır menüler kullanabilirsiniz.
Faydalı Kaynaklar
Sonuç
Bu kılavuzu izleyerek, DataTables DataGrid’inize kolayca satır kayıtları ekleyebilirsiniz. Bu, kullanıcıların verileri dinamik olarak yönetmesine ve uygulamalarınızın işlevselliğini artırmasına olanak tanır.