dev

DataTables, bir viki tablosuna çeşitli özellikler ekler. Bunlardan bazıları şunlardır:

Installation

Configuration

HTML5 yapılandırması kullanılıyorsa, datatable sınıfını bir vikitablo veya HTML tablosuna ekleyin. Bir tablonun HTML5 öznitelikleri ile düzgün şekilde yapılandırılamayan özellikleri varsa, benzersiz bir kimliğe sahip bir tablo, istenen yapılandırmayla Common.js dosyasında bir DataTable olarak başlatılabilir; Bu, hemen görünür değişiklikleri yapmak daha zor hâle geldiğinden ve acemi düzenleyiciler için sezgisel olmadığı için önerilmez.

Yapılandırma için HTML5 data-* özniteliklerini kullanırken:

Configuration options
Seçenek HTML5 özniteliği Açıklama Grup
autoWidth data-auto-width Özellik kontrolü DataTables'ın akıllı sütun genişliği işleme. Features
deferRender data-defer-render Özellik kontrolü, ek başlatma hızı için işlemeyi geciktirdi. Features
info data-info Özellik kontrol tablosu bilgi görüntüleme alanı. Features
lengthChange data-length-change Özellik, son kullanıcının tablonun sayfalama görüntüleme uzunluğunu değiştirme yeteneğini kontrol eder. Features
ordering data-ordering DataTable'larda özellik kontrolü sıralama yetenekleri. Features
paging data-paging Tablo sayfalandırmasını etkinleştirin veya devre dışı bırakın. Features
processing data-processing Özellik, işleme göstergesini kontrol eder. Features
scrollX data-scroll-x Yatay kaydırma. Features
scrollY data-scroll-y Dikey kaydırma. Features
searching data-searching Özellik kontrol arama (filtreleme) yetenekleri. Features
serverSide data-server-side Özellik denetimi DataTables'ın sunucu tarafı işleme modu. Features
stateSave data-state-save Durum kaydetme. Sayfa yeniden yüklendiğinde tablo durumunu geri yükleyin. Features
ajax data-ajax Tablo içeriği için bir Ajax kaynağından veri yükleyin. Data
ajax.data data-ajax Bir Ajax isteği üzerine sunucuya gönderilen verileri ekleyin veya değiştirin. Data
ajax.dataSrc data-ajax Tablo verileri için veri özelliği veya işleme yöntemi. Data
data data-data Tablo için görüntüleme verileri olarak kullanılacak veriler. Data
deferLoading data-defer-loading Sunucu tarafı verilerinin yüklenmesini ikinci çekilişe kadar geciktir DataTables
destroy data-destroy Seçiciyle eşleşen mevcut tabloları yok edin ve yeni seçeneklerle değiştirin. DataTables
displayStart data-display-start İlk sayfalama başlangıç noktası. DataTables
dom data-dom Sayfada görünecek tablo kontrol ögelerini ve hangi sırayla tanımlayın. DataTables
lengthMenu data-length-menu Sayfa uzunluğu select listesindeki seçenekleri değiştirin. DataTables
order data-order Tabloya uygulanacak ilk düzen (sıralama). DataTables
orderCellsTop data-order-cells-top Bir sütunda sıralama olay işleyicisinin hangi hücreye uygulanacağını kontrol edin. DataTables
orderClasses data-order-classes Tablonun gövdesinde sıralanan sütunları vurgulayın. DataTables
orderFixed data-order-fixed Her zaman tabloya uygulanacak sıralama. DataTables
orderMulti data-order-multi Çoklu sütun sıralama yeteneği kontrolü. DataTables
pageLength data-page-length İlk sayfa uzunluğunu değiştirin (sayfa başına satır sayısı). DataTables
pagingType data-paging-type Sayfalandırma düğmesi görüntüleme seçenekleri. DataTables
renderer data-renderer Bileşen oluşturucu türlerini görüntüle DataTables
retrieve data-retrieve Mevcut bir DataTables örneğini alın. DataTables
rowId data-row-id DataTables'ın tr ögesi DOM kimliklerini ayarlamak için kullanacağı veri özelliği adı. DataTables
scrollCollapse data-scroll-collapse Sınırlı sayıda satır gösterildiğinde tablonun yüksekliğinin azalmasına izin verin. DataTables
search data-search DataTables'da ve/veya filtreleme seçeneklerinde bir başlangıç filtresi ayarlayın. DataTables
search.caseInsensitive data-search Büyük/küçük harfe duyarlı filtreleme seçeneğini kontrol edin. DataTables
search.regex data-search Arama teriminde normal ifade karakterlerinden kaçmayı etkinleştirin / devre dışı bırakın. DataTables
search.search data-search Tabloda bir ilk filtreleme koşulu ayarlayın. DataTables
search.smart data-search DataTables'ın akıllı filtrelemesini etkinleştirin / devre dışı bırakın. DataTables
searchCols data-search-cols Tek tek sütunlar için bir ilk arama tanımlayın. DataTables
searchDelay data-search-delay Arama için bir gaz kelebeği frekansı ayarlayın. DataTables
stateDuration data-state-duration Kaydedilmiş durum geçerlilik süresi. DataTables
stripeClasses data-stripe-classes Tablodaki satırlar için zebra şerit sınıfı adlarını ayarlayın. DataTables
tabIndex data-tab-index Klavye gezintisi için sekme dizini kontrolü. DataTables
columnDefs data-column-defs Sütun tanımı başlatma özelliklerini ayarlayın. Columns
columnDefs.targets data-column-defs Bir veya daha fazla sütuna bir sütun tanımı atayın. Columns
columns data-columns Sütuna özel başlatma özelliklerini ayarlayın. Columns
columns.cellType data-columns Bir sütun için oluşturulacak hücre türü. Columns
columns.className data-columns Sütundaki her hücreye atanacak sınıf. Columns
columns.contentPadding data-columns Bir tablo için en uygun genişliği hesaplarken kullanılan metin içeriğine dolgu ekleyin. Columns
columns.createdCell data-columns DOM manipülasyonuna izin vermek için hücre tarafından oluşturulan geri çağrı. Columns
columns.data data-columns Satır veri nesnesinden / dizisinden sütun için veri kaynağını ayarlayın. Columns
columns.defaultContent data-columns Bir sütun için varsayılan, statik, içeriği ayarlayın. Columns
columns.name data-columns Bir sütun için açıklayıcı bir ad belirleyin. Columns
columns.orderData data-columns Bir sütun için varsayılan sıra olarak birden çok sütun sıralamasını tanımlayın. Columns
columns.orderDataType data-columns Canlı DOM sıralama tipi ataması. Columns
columns.orderSequence data-columns Sıralanma yönü uygulama sırası. Columns
columns.orderable data-columns Bu sütunda sıralamayı etkinleştirin veya devre dışı bırakın. Columns
columns.render data-columns Tabloda kullanılmak üzere verileri işleyin. Columns
columns.searchable data-columns Bu sütundaki verilerde aramayı etkinleştirin veya devre dışı bırakın. Columns
columns.title data-columns Sütun başlığını ayarlayın. Columns
columns.type data-columns Sütun türünü ayarlayın. Dize işlemeyi filtrelemek ve sıralamak için kullanılır. Columns
columns.visible data-columns Bu sütunun görüntülenmesini etkinleştirin veya devre dışı bırakın. Columns
columns.width data-columns Sütun genişliği ataması. Columns
language data-language DataTables için dil yapılandırma seçenekleri. i18n
language.aria data-language WAI-ARIA'ya özgü öznitelikler için kullanılan dil dizeleri. i18n
language.aria.paginate data-language Sayfalandırma düğmeleri için WAI-ARIA etiketleri. i18n
language.aria.paginate.first data-language İlk sayfalandırma düğmesi için WAI-ARIA etiketi. i18n
language.aria.paginate.last data-language Son sayfalandırma düğmesi için WAI-ARIA etiketi. i18n
language.aria.paginate.next data-language Sonraki sayfalandırma düğmesi için WAI-ARIA etiketi. i18n
language.aria.paginate.previous data-language Önceki sayfalandırma düğmesi için WAI-ARIA etiketi. i18n
language.aria.sortAscending data-language WAI-ARIA'ya özgü öznitelikler için kullanılan dil dizeleri. i18n
language.aria.sortDescending data-language WAI-ARIA'ya özgü öznitelikler için kullanılan dil dizeleri. i18n
language.decimal data-language Ondalık basamak karakteri. i18n
language.emptyTable data-language Tabloda kayıt dizesi yok. i18n
language.info data-language Tablo özet bilgi görüntüleme dizesi. i18n
language.infoEmpty data-language Tabloda kayıtlar boş olduğunda kullanılan tablo özet bilgi dizesi. i18n
language.infoFiltered data-language Tablo filtrelendiğinde özet bilgilere dize eklenir. i18n
language.infoPostFix data-language Diğer tüm özet bilgi dizelerine eklenecek dize. i18n
language.lengthMenu data-language Sayfa uzunluğu seçenekleri dizesi. i18n
language.loadingRecords data-language Bilgi görüntüleme dizesi yüklenmesi. Ajax veri yüklerken gösterilir. i18n
language.paginate data-language Sayfalandırmaya özgü dil dizeleri. i18n
language.paginate.first data-language Sayfalandırma 'ilk' düğme dizesi. i18n
language.paginate.last data-language Sayfalandırma 'son' düğme dizesi. i18n
language.paginate.next data-language Sayfalandırma 'sonraki' düğme dizesi. i18n
language.paginate.previous data-language Sayfalandırma 'önceki' düğme dizesi. i18n
language.processing data-language Gösterge dizisi işlenmesi. i18n
language.search data-language Giriş dizesini araması. i18n
language.searchPlaceholder data-language Giriş ögesi yer tutucu özniteliğini arayın. i18n
language.thousands data-language Bin ayırıcı. i18n
language.url data-language Uzak dosyadan dil bilgilerini yükleyin. i18n
language.zeroRecords data-language Dize filtrelemenin bir sonucu olarak tablo boş. i18n
fixedColumns data-fixed-columns DataTables için FixedColumns uzantısını etkinleştirin ve yapılandırın. FixedColumns
fixedColumns.heightMatch data-fixed-columns Kullanılacak satır yüksekliği eşleştirme algoritması. FixedColumns
fixedColumns.leftColumns data-fixed-columns Tablonun soluna sabitlenecek sütun sayısı. FixedColumns
fixedColumns.rightColumns data-fixed-columns Tablonun sağına sabitlenecek sütun sayısı. FixedColumns
fixedHeader data-fixed-header FixedHeader yapılandırma nesnesi. FixedHeader
fixedHeader.footer data-fixed-header Sabit altbilgiyi etkinleştirin / devre dışı bırakın. FixedHeader
fixedHeader.footerOffset data-fixed-header Tablonun sabit alt bilgisini ofsetleyin. FixedHeader
fixedHeader.header data-fixed-header Sabit başlığı etkinleştirin / devre dışı bırakın. FixedHeader
fixedHeader.headerOffset data-fixed-header Tablonun sabit başlığını ofsetleyin. FixedHeader
columns.responsivePriority data-columns Sütunun görünürlük önceliğini ayarlayın. Responsive
responsive data-responsive DataTables için Responsive uzantıyı etkinleştirin ve yapılandırın. Responsive
responsive.breakpoints data-responsive Responsive bir örnek için kesme noktalarını ayarlayın. Responsive
responsive.details data-responsive Daraltılmış tablolar için Responsive tarafından gösterilen alt satırları etkinleştirin ve yapılandırın. Responsive
responsive.details.display data-responsive Gizli bilgilerin son kullanıcıya nasıl gösterilmesi gerektiğini tanımlayın. Responsive
responsive.details.renderer data-responsive Alt satırları görüntülemek için kullanılan oluşturucuyu tanımlayın. Responsive
responsive.details.target data-responsive column ayrıntı türünü kullanırken alt satır görüntüleme denetimi için sütun / seçici. Responsive
responsive.details.type data-responsive Alt satır görüntüleme kontrol türünü ayarlayın. Responsive
responsive.orthogonal data-responsive Gizli bilgi ekranı için ortogonal veri istek tipini ayarlayın. Responsive
rowGroup data-row-group DataTables için RowGroup uzantısını etkinleştirin ve yapılandırın. RowGroup
rowGroup.className data-row-group Gruplama satırları için kullanılacak sınıf adını ayarlayın. RowGroup
rowGroup.dataSrc data-row-group Gruplama veri kaynağı olarak kullanılacak veri noktasını ayarlayın. RowGroup
rowGroup.emptyDataGroup data-row-group null, undefined veya boş dize grubu verileri olan satırlar için gösterilecek metin. RowGroup
rowGroup.enable data-row-group Başlatma sırasında satır gruplamasını devre dışı bırakma yeteneği sağlar. RowGroup
rowGroup.endClassName data-row-group Gruplandırma bitiş satırları için kullanılacak sınıf adını ayarlayın. RowGroup
rowGroup.endRender data-row-group Son gruplama satırında gösterilen verileri kontrol etmek için kullanılabilecek bir işlev sağlayın. RowGroup
rowGroup.startClassName data-row-group Gruplama başlangıç satırları için kullanılacak sınıf adını ayarlayın. RowGroup
rowGroup.startRender data-row-group Başlangıç gruplandırma satırında gösterilen verileri kontrol etmek için kullanılabilecek bir işlev sağlayın. RowGroup
button.searchPanes data-button Bir düğme aracılığıyla SearchPanes ile etkinleştirin. SearchPanes
columns.searchPanes data-columns Tek tek sütunlar için seçenekler için kapsayıcı. SearchPanes
columns.searchPanes.className data-columns Bir bölmeye özel bir sınıf adı ekleyin. SearchPanes
columns.searchPanes.combiner data-columns Bölmede uygulanacak mantık türünü ayarlayın. SearchPanes
columns.searchPanes.controls data-columns Kontrol düğmelerini gizleyin ve belirli bir sütunun bölmesinde aramayı devre dışı bırakın. SearchPanes
columns.searchPanes.dtOpts data-columns Tek bir bölme için kullanılan DataTables'ın özelliklerini tanımlayın. SearchPanes
columns.searchPanes.emptyMessage data-columns Belirli bölmeler için özel boş mesajlar ayarlayın. SearchPanes
columns.searchPanes.header data-columns SearchPane'in başlığını ayarlayın. SearchPanes
columns.searchPanes.hideCount data-columns Kullanımdan kaldırıldı. Belirli bir sütunun bölmesindeki sayı sütununu gizleyin. SearchPanes
columns.searchPanes.name data-columns SearchPane'in adını ayarlayın. SearchPanes
columns.searchPanes.options data-columns Özel arama seçeneklerini tanımlayın. SearchPanes
columns.searchPanes.orderable data-columns Belirli bir sütunun bölmesindeki sıralama düğmelerini gizleyin. SearchPanes
columns.searchPanes.orthogonal data-columns İşleme işlevleri için ortogonal verilerin değerlerini ayarlayın. SearchPanes
columns.searchPanes.preSelect data-columns Bir bölmede önceden seçilmiş seçenekler. SearchPanes
columns.searchPanes.show data-columns Bölmeleri gizlemeye veya göstermeye zorlayın. SearchPanes
columns.searchPanes.threshold data-columns Bu bölmeyi görüntülemek için belirli bir sütunda gereken minimum benzersiz değer sayısını ayarlayın. SearchPanes
columns.searchPanes.viewCount data-columns Belirli bir sütunun bölmesindeki sayı sütununu gizleyin. SearchPanes
language.searchPanes data-language Dil seçenekleri için kapsayıcı. SearchPanes
searchPanes data-search-panes Arama Bölmeleri'ni etkinleştirin. SearchPanes
searchPanes.cascadePanes data-search-panes Bölmelerin seçim altında basamaklanmasına izin verin. SearchPanes
searchPanes.clear data-search-panes Bölmelerdeki seçimlerin hızlı bir şekilde temizlenmesini sağlamak için düğmeleri devre dışı bırakın. SearchPanes
searchPanes.columns data-search-panes Bölmeleri görüntülerken hangi sütunların dikkate alınacağını seçin. SearchPanes
searchPanes.controls data-search-panes Kontrol düğmelerini gizleyin ve tüm bölmelerde aramayı devre dışı bırakın. SearchPanes
searchPanes.dtOpts data-search-panes Bölmeler olarak kullanılan DataTables'ın özelliklerini tanımlayın. SearchPanes
searchPanes.emptyMessage data-search-panes Kullanımdan kaldırıldı. Özel boş mesaj ayarlayın. SearchPanes
searchPanes.filterChanged data-search-panes Seçim yapıldığında başlık metnini güncelleme işlevi. SearchPanes
searchPanes.hideCount data-search-panes Kullanımdan kaldırıldı. Tüm bölmelerde sayım sütununu gizleyin. SearchPanes
searchPanes.i18n data-search-panes Dil seçenekleri için kapsayıcı. SearchPanes
searchPanes.i18n.clearMessage data-search-panes Temizle düğmesinde görüntülenecek mesajı ayarlayın. SearchPanes
searchPanes.i18n.collapse data-search-panes SearchPanes Düğmesi'nde görüntülenecek mesajı ayarlayın. SearchPanes
searchPanes.i18n.count data-search-panes Arama yapılmadığında sayı sütununda görüntülenecek mesajı ayarlayın. SearchPanes
searchPanes.i18n.countFiltered data-search-panes Arama yaparken sayı sütununda görüntülenecek mesajı ayarlayın. SearchPanes
searchPanes.i18n.emptyMessage data-search-panes Bölme seçeneği olarak görüntülenen boş mesaja uluslararasılaştırma ekleyin. SearchPanes
searchPanes.i18n.emptyPanes data-search-panes Hiçbir bölme görüntülenmediğinde gösterilen mesaja uluslararasılaştırma ekleyin. SearchPanes
searchPanes.i18n.loadMessage data-search-panes Bölmeler yüklenirken gösterilen mesaja uluslararasılaştırma ekleyin. SearchPanes
searchPanes.i18n.title data-search-panes Kaç bölmenin seçildiğini gösteren başlığa uluslararasılaştırma ekleyin. SearchPanes
searchPanes.layout data-search-panes Bölmelerin sayfada nasıl görüntüleneceğinin düzenini ayarlayın. SearchPanes
searchPanes.order data-search-panes Bölmelerin sırasını ayarlayın. SearchPanes
searchPanes.orderable data-search-panes Tüm bölmelerdeki sıralama düğmelerini gizleyin. SearchPanes
searchPanes.panes data-search-panes Tüm sütunları filtrelemek için özel bölmeler tanımlayın. SearchPanes
searchPanes.panes.className data-search-panes Özel bir bölme için özel bir sınıf ekleyin. SearchPanes
searchPanes.panes.dtOpts data-search-panes Özel bir bölme için DataTables seçeneklerini tanımlayın. SearchPanes
searchPanes.panes.header data-search-panes Özel bölmeler için başlığı tanımlayın. SearchPanes
searchPanes.panes.options data-search-panes Özel bölmeler için seçenekleri tanımlayın. SearchPanes
searchPanes.panes.options.className data-search-panes Özel bir bölmenin belirli seçeneklerine sınıflar ekleyin. SearchPanes
searchPanes.panes.options.label data-search-panes Özel bölme seçeneği için etiketi tanımlayın. SearchPanes
searchPanes.panes.options.value data-search-panes Özel bölme seçeneği için değeri tanımlayın. SearchPanes
searchPanes.panes.preSelect data-search-panes Özel bölmeler için herhangi bir preSelections tanımlayın. SearchPanes
searchPanes.threshold data-search-panes Bir sütunun bölmesini görüntülemek için gereken toplam değerlere benzersiz değerlerin minimum oranını ayarlayın. SearchPanes
searchPanes.viewCount data-search-panes Tüm bölmelerde sayım sütununu gösterin. SearchPanes
searchPanes.viewTotal data-search-panes Görünür sayımı göstermek için arama yaparken sayı sütununu güncelleyin. SearchPanes
language.select data-language Select tarafından kullanılan dil dizeleri için kapsayıcı nesnesi. Select
language.select.cells data-language Seçilen hücre sayısı için tablo bilgileri özet dizesi. Select
language.select.columns data-language Seçilen sütun sayısı için tablo bilgileri özet dizesi. Select
language.select.rows data-language Seçilen satır sayısı için tablo bilgileri özet dizesi. Select
select data-select Select yapılandırma nesnesi. Select
select.blurable data-select Tablonun dışına tıklandığında seçili ögelerin kaldırılıp kaldırılmayacağını belirtin. Select
select.className data-select Seçili ögelere uygulanacak sınıf adını ayarlayın. Select
select.info data-select Tablo özetinde öge seçimi bilgilerinin görüntülenmesini etkinleştirin / devre dışı bırakın. Select
select.items data-select Hangi tablo ögelerinin seçileceğini belirleyin (satırlar, sütunlar veya hücreler). Select
select.selector data-select Ögeleri seçmek için fare olayı yakalama için kullanılan öge seçiciyi ayarlayın. Select
select.style data-select Tabloyla son kullanıcı etkileşimi için seçim stilini ayarlayın. Select
select.toggleable data-select Tıklandığında seçili satırların seçiminin kaldırılmasını devre dışı bırakın. Select

Örnek

İşte bazı örnek yapılandırmalar:

Örneklere bağlantılar, bu sayfaya başka örnekler yazılana kadar yer tutucu olarak verilmiştir.

Temel işlevler ve düzen

Sayfalama

Sıralama

Sütunlar ve başlıklar

Alt satırları ekleme

AJAX kaynakları ile veri

Not: Bu özellik şu anda FandomMobile'da etkin değildir.

FixedColumns

FixColumns, son kullanıcıya bir kılavuz sağlamak için (örneğin bir dizin sütunu) kayan bir DataTables'da en soldaki sütunları yerinde "dondurur".

Responsive

Not: Bu özellik şu anda FandomMobile'da etkin değildir.

Responsive, dinamik sütun görünürlük kontrolü aracılığıyla farklı ekran boyutları için tablo düzenini otomatik olarak optimize ederek, masalarınızı masaüstü ve mobil ekranlarda kullanışlı hâle getirir.

RowGroup

RowGroup, bir DataTables'da görsel olarak gruplandırılmış veri kümeleri için basit bir API sağlar. API ile dinamik olarak kontrol edilebilen bu gruplama, özelleştirilmiş veri toplama sağlamak için kullanılabilir ve kullanıcıların benzer verilerin bir özetini hızlı bir şekilde görüntülemesini sağlar.

Scroller

DataTables için bir sanal oluşturucu, tablonun tam veri kümesi için kaydırılıyormuş gibi görünmesine izin verir, ancak aslında hızlı işlem için yalnızca geçerli ekran için gereken satırları çizer.

SearchPanes

SearchPanes, bölmelerdeki satırları seçerek DataTables'da arama yapma yeteneğiyle DataTables'a bölmeler ekler. Bu, daha erişilebilir bir arama özelliği ve özel arama yetenekleri eklemek söz konusu olduğunda çok kullanışlıdır.

Select

Select, bir DataTables'a öge seçme yetenekleri ekler. Ögeler, bağımsız olarak veya birlikte seçilebilen satırlar, sütunlar veya hücreler olabilir. Öge seçimi, kullanıcıların tablo üzerinde düzenleme gibi bazı eylemler gerçekleştirebilecekleri etkileşimli tablolarda özellikle yararlı olabilir.