wmaraci reklam

Bir tabloyu belli bir karakterden sonra gizlemek?

17 Mesajlar 2.052 Okunma
wmaraci reklam

Lions Lions WM Aracı Kullanıcı
  • Üyelik 05.05.2017
  • Yaş/Cinsiyet 28 / E
  • Meslek Web-Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 1027
  • Beğeniler 366 / 534
  • Ticaret 5, (%100)
Merhabalar. Html de bir tablo hazırladım fakat bu tabloya ekleyeceğim belkide yüzlerce satır var. Fakat sadece 5-6 satırını göstermesini gerisini arka planda gizlemesini istiyorum. Yardımcı olursanız sevinirim.

HTML Kod;
























Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany




Css Kod;

#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}

#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}





JS Code;

function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
 

 

SMM Panel, Sosyalyuvam, Bayilik Paneli, En Uygun Panel, Takipçi Paneli
reklam

soulmy soulmy WM Aracı Kullanıcı
  • Üyelik 12.06.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek Öğretmen
  • Konum Samsun
  • Ad Soyad O** Y**
  • Mesajlar 1722
  • Beğeniler 398 / 400
  • Ticaret 20, (%100)
table tr:nth-of-type(n+5) {
display: none;
}
Lions

kişi bu mesajı beğendi.

.

Lions Lions WM Aracı Kullanıcı
  • Üyelik 05.05.2017
  • Yaş/Cinsiyet 28 / E
  • Meslek Web-Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 1027
  • Beğeniler 366 / 534
  • Ticaret 5, (%100)
soulmy

Hocam js eklenecek değil mi bu? Olmadı ama?
 

 

soulmy soulmy WM Aracı Kullanıcı
  • Üyelik 12.06.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek Öğretmen
  • Konum Samsun
  • Ad Soyad O** Y**
  • Mesajlar 1722
  • Beğeniler 398 / 400
  • Ticaret 20, (%100)
Javascript değil, CSS kodu bu.
 

 

.
wmaraci

Lions Lions WM Aracı Kullanıcı
  • Üyelik 05.05.2017
  • Yaş/Cinsiyet 28 / E
  • Meslek Web-Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 1027
  • Beğeniler 366 / 534
  • Ticaret 5, (%100)
soulmy

Hocam teşekkür ederim gizledi fakat bu defa da aramada çıkartmıyor. Yani arayınca listede gizli olanları göstermiyor. Yapmak istediğim şey şu aslında;

Mesela 500 tane satır girdim o tabloya. Sadece 10 tanesini gösterecek ve bir kelime arandığı zaman o kelimeyi içeren tüm satırları "tablo boyutunun dışına çıkmadan" sıralayacak. Kaydırmalı çubukla aşağı doğru inerek bakabileceğiz. Sadece şu gizleme ve gösterme işini yapamadım gerisini css den hallederim.
 

 

Lions Lions WM Aracı Kullanıcı
  • Üyelik 05.05.2017
  • Yaş/Cinsiyet 28 / E
  • Meslek Web-Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 1027
  • Beğeniler 366 / 534
  • Ticaret 5, (%100)
Yardımcı olabilecek var mıdır?
 

 

Weismann21 Weismann21 WM Aracı Kullanıcı
  • Üyelik 29.11.2017
  • Yaş/Cinsiyet 26 / E
  • Meslek Cross Platform Developer
  • Konum İstanbul Anadolu
  • Ad Soyad E** B**
  • Mesajlar 168
  • Beğeniler 12 / 47
  • Ticaret 0, (%0)
bence bootstrap datatable kullan link
Lions

kişi bu mesajı beğendi.

Lions Lions WM Aracı Kullanıcı
  • Üyelik 05.05.2017
  • Yaş/Cinsiyet 28 / E
  • Meslek Web-Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 1027
  • Beğeniler 366 / 534
  • Ticaret 5, (%100)
Weismann21


Hocam çok teşekkür ederim tam da aradığım tablo biçimini buldum ve sayenizde uyguladım. Ufak bir şey sormak istiyorum Show, Entries, Search gibi bölümlerin Türkçeleştirmesini nereden yapabilirim? Hangi js dosyasında olduğunu bulamadım. Teşekkür ederim.
 

 

Okanisik Okanisik Vip Tema Web Tasarım A.Ş. Kullanıcı
  • Üyelik 29.06.2011
  • Yaş/Cinsiyet 37 / E
  • Meslek Vip Tema Web Tasarım A.Ş.
  • Konum Tekirdağ
  • Ad Soyad Ö** I**
  • Mesajlar 1380
  • Beğeniler 699 / 702
  • Ticaret 21, (%100)
@Lions https://okandiyebiri.com/datatablesi-bootstrap-icin-kullanmak/#respond
Lions

kişi bu mesajı beğendi.

Vip Tema Web Tasarım A.Ş.

Lions Lions WM Aracı Kullanıcı
  • Üyelik 05.05.2017
  • Yaş/Cinsiyet 28 / E
  • Meslek Web-Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 1027
  • Beğeniler 366 / 534
  • Ticaret 5, (%100)
Okan_IŞIK

Hocam dediklerinizi yaptım ancak değişiklik olmadı.
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al