Topluluk Merkezi

Harika veri trendleri, Ayın Editörleri ve kaçırmış olabileceğiniz önemli güncellemelerin bir özetini içeren Bu Ay Fandom'da ile Eylül sona eriyor.

READ MORE

Topluluk Merkezi
Advertisement
Topluluk Merkezi
Maddeleri kategorilere ayırma konusunda yardım için Yardım:Kategori'de parametreleri sıralama sayfasına bakın.

Sıralanabilir tablolar, belirli bir sütundaki değerlere göre tablo satırlarını sıralama yeteneğine sahiptir. Bu, class="sortable" aracılığıyla yapılır.

Sıralanabilir tabloların sıralama için JavaScript kullandığını ve şu anda mobil düzen üzerinde çalışmadığını unutmayın.

Sıralanabilir bir tablo oluşturma

Bir tabloyu sıralanabilir yapmak kolaydır, çünkü gereken tek şey "sortable" sınıfını eklemektir. Ancak, sayılarla sıralama veya bir tablo altbilgisi kullanma gibi belirli durumlar, sayfanın ilerleyen kısımlarında ayrıntılı olarak açıklandığı üzere fazladan girdi gerektirebilir.

Örneğin:

{| class="article-table sortable"
! Adı
! Soyadı
! Sevdiği Renk
|-
| Ben
| Benny
| Kahverengi
|-
| John
| Smith
| Mavi
|-
| Smith
| John
| Sarı
|-
| Ben
| Jones
| Kırmızı
|-
| John
| Smythe
| Yeşil
|-
| Smith
| Johnson
| Bordo
|}

Bunun sonucu:

Adı Soyadı Sevdiği Renk
Ben Benny Kahverengi
John Smith Mavi
Smith John Sarı
Ben Jones Kırmızı
John Smythe Yeşil
Smith Johnson Bordo

Oklara tıklamak, sütunu sayısal olarak ve sonra alfabetik olarak sıralamanıza izin verir. Birden çok sütuna göre sıralamak istiyorsanız, ikinci sütununuza tıklarken Shift tuşunu basılı tutun.

Gelişmiş sıralama

Varsayılan olarak, sistem her sütundaki veri türünü ilk beş satıra bakarak tahmin eder. Bu çoğu zaman işe yarar, ancak tutarsız veriler veya beklenmedik karakterler nedeniyle karıştırılabilir. Örneğin 10cm, 20cm, 100cm 10cm, 100cm, 20cm olarak sıralanacaktır (sayısal olarak değil "harflere" göre sıralanacaktır). Bu, sütun başlıklarında "data-sort-type" özniteliği kullanılarak veya tek tek hücrelerdeki "data-sort-value" özniteliği kullanılarak düzeltilebilir.

data-sort-type

data-sort-type="..." sütunun veri türünü belirtmek için bir sütun başlığına eklenebilir. Birkaç tür desteklenir, ancak en yaygın olanları şunlardır:

  • text - Metni sembollere, rakamlara ve harflere göre sıralar.
  • number - Sayısal bir değer, noktalar, virgüller, boşluklar, "+" veya "-" (ör: +1,234,5) bekler. Numaradan sonraki diğer karakterler dikkate alınmayacaktır.
  • currency - Önünde $, £, € veya ¥ olan bir sayı bekler (ör. $1,00 $, ¥10.000)
  • date - Uyumlu bir tarih biçimi beklemesi (ör: 25-12-2001, 25 Aralık 2001)

Bir hücrenin içeriğini sütunun belirtilen türle eşleşmediği, sıfır değeri gibi davranılabilir.

Örneğin:

{| class="article-table sortable"
! Default
! data-sort-type="number" | Sayı
! data-sort-type="currency" | Döviz
|-
| !@#$%
| 20
| $231
|-
| 10000
| 10
| ¥55
|-
| Elma
| 300
| £34
|-
| Muz
| 200
| €999
|}

Bunun sonucu:

Default Sayı Döviz
!@#$% 20 $231
10000 10 ¥55
Elma 300 £34
Muz 200 €999

data-sort-value

Bazen bir sütunda göstermek istediğiniz şey, sırayla nasıl sipariş vereceğinizi söyleyemez. Bu data-sort-value="..." gibi durumlarda kullanılır.

Örnek 1:

{| class="article-table sortable"
! Konsol
! Renk
! Stok
|-
| Dreamcast
| Beyaz
| data-sort-value="5" | Beş
|-
| iPad
| Beyaz
| data-sort-value="0" | Sıfır
|-
| Xbox
| Yeşil
| data-sort-value="8" | Sekiz
|}

Bunun sonucu:

Konsol Renk Stok
Dreamcast Beyaz Beş
iPad Beyaz Sıfır
Xbox Yeşil Sekiz

Örnek 2:

{| class="article-table sortable" style="width: 500px;"
! data-sort-type="text" scope="col" |Meyve
! data-sort-type="currency" scope="col" |Ortalama tutar ($USD)
! data-sort-type="number" scope="col" style="width:100px" |Elmanın ticari değeri
! data-sort-type="number" scope="col" style="width:100px" |Limonun ticari değeri
|-
|data-sort-value="Ananas"| [[Dosya:Pineappleexample.png|30px]]<br />Ananas
|$3.00
|data-sort-value="15"|[[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]]
|data-sort-value="7.5"|[[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Halflemonexample.png|10px]]
|-
|data-sort-value="Elma"| [[Dosya:Appleexample.png|30px]]<br />Apple
|$0.20
|data-sort-value="0"|Bilinmiyor
|data-sort-value="0.5"|[[Dosya:Halflemonexample.png|10px]]
|-
|data-sort-value="Limon"| [[Dosya:Lemonexample.png|30px]]<br />Limon
|$0.40
|data-sort-value="2"|[[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]]
|data-sort-value="0"|Bilinmiyor
|-
|data-sort-value="Hindistan cevizi"| [[Dosya:Coconutexample.png|30px]]<br />Hindistan cevizi
|$1.40
|data-sort-value="7"|[[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]][[Dosya:Appleexample.png|20px]]
|data-sort-value="3.5"|[[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Lemonexample.png|20px]][[Dosya:Halflemonexample.png|10px]]
|}

Bunun sonucu:

Meyve Ortalama tutar ($USD) Elmanın ticari değeri Limonun ticari değeri
Pineappleexample.png
Ananas
$3.00 Appleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.png Lemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngHalflemonexample.png
Appleexample.png
Apple
$0.20 Bilinmiyor Halflemonexample.png
Lemonexample.png
Limon
$0.40 Appleexample.pngAppleexample.png Bilinmiyor
Coconutexample.png
Hindistan cevizi
$1.40 Appleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.png Lemonexample.pngLemonexample.pngLemonexample.pngHalflemonexample.png

Tarih sıralama

{| class="article-table sortable"
|-
! data-sort-type="date" | Gün, ay ve yıl
|-
| 21 Aralık 1905
|-
| 17 Ocak 1950
|-
| 14 Mayıs 2014
|-
| 8 Ağustos 1966
|}

Bunun sonucu:

Gün, ay ve yıl
21 Aralık 1905
17 Ocak 1950
14 Mayıs 2014
8 Ağustos 1966

Sıralanamayan sütunlar

Sütunlardan birinin sıralanamaz olmasını istediğiniz bir tablonuz varsa, bunu başlığına "unsortable" sınıfını ekleyerek yapabilirsiniz.

Örnek:

{| class="article-table sortable"
|-
! Oyun
! Tema
! class="unsortable" | Ortalama
|-
| Pocket League Hikayesi
| futbol
| ☆☆
|-
| Oyun Geliştirme Hikayesi
| vidya gamez
| ☆☆☆
|-
| Grand Prix Hikayesi
| cars
| ☆
|}

Bunun sonucu:

Oyun Tema Ortalama
Pocket League Hikayesi futbol ☆☆
Oyun Geliştirme Hikayesi vidya gamez ☆☆☆
Grand Prix Hikayesi cars

Tablo altbilgisi

Tablonun altındaki bir satırın sıralanmasını istemiyorsanız ("toplamlar" satırı gibi), bu satıra class="sortbottom" ekleyerek yapılabilir.

Örnek:

{| class="article-table sortable"
! Adı
! Cinsiyet
! Yaş
|-
| Amanda
| Kadın
| 12
|-
| Bill
| Erkek
| 23
|-
| Cathryn
| Erkek
| 34
|- class="sortbottom"
! colspan="2" | Ortalama
| 23
|}

Bunun sonucu:

Adı Cinsiyet Yaş
Amanda Kadın 12
Bill Erkek 23
Cathryn Erkek 34
Ortalama 23

Ayrıca bakınız

Daha fazla yardım ve geri bildirim

Advertisement