• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Bootstrap tabela - detailFormatter - tylko niektóre dane, a nie wszystkie.

VPS Starter Arubacloud
0 głosów
385 wizyt
pytanie zadane 22 maja 2017 w PHP przez Zbigniew Andrysiak Bywalec (2,470 p.)
edycja 23 maja 2017 przez Zbigniew Andrysiak

Witajcie. Mam tabelę w Bootstrap, w której chciałbym, aby po kliknięciu na "+" pokazywał się dodatkowy wiersz, w którym byłaby przypisana dana wartość z z bazy sql. Poniżej kod:

 <table id="table"   data-toggle="table" data-cache="false" data-show-columns="true" ata-click-to-select="true" data-toolbar="#toolbar" data-search="true"  data-pagination="true" data-page-size="500" data-show-refresh="false"    data-url="data.php"  data-detail-view="true"  data-filter-control="true"  data-detail-formatter="detailFormatter"> 

    <thead>  
            <th data-field="zdjecie" data-formatter="imageFormatter" data-sortable="true" data-tooltip="true" ></th>
            <th data-field="marka" data-sortable="true" class="text-center" >Marka</th>
            <th data-field="model" data-sortable="true" class="text-center" >Model</th>
            <th data-field="lcd" data-sortable="true"  class="text-center">Wyświetlacz</th>
            <th data-field="cena"  data-sortable="true" class="text-center" >Cena</th>
            <th data-field="numermodelu"  data-sortable="true" class="text-center" >Numer Modelu</th>
            <th data-field="rodzajlcd" data-sortable="true"  class="text-center">Rodzaj Wyświetlacza</th>
            <th data-field="ppi"  data-sortable="true" class="text-center" >Nasycenie</th>
            <th data-field="rozdzielczosc"  data-sortable="true" class="text-center" >Numer Modelu</th>
            
            <th data-field="najnizszacena"> </th>
   </thead>


                        </table>
</div>
</div>
</div>
</div>
</div>

<script>

   

    function imageFormatter(value, row) {
      return '<img src="'+value+'" width= "50px" height= "50px" />';
    }

    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key['cena'] + ':</b> ' + value['cena'] + '</p>');
        });
        return html.join('');
    }




</script>

Oraz plik data.php

	require 'configbase.php';
		
$stmt = $db->query('SELECT * FROM smartfony');

		$arrVal = array();
 		
		$i=1;
 		while($rowList = $stmt->fetch()){
 								 
						$name = array(
								'id' => $i,
 	 		 	 				'lcd'=> $rowList['typscreen'],
	 		 	 				'cena'=> $rowList['cenatelefonu'],
	 		 	 				'marka' => $rowList['marka'],
	 		 	 				'model' => $rowList['model'],
	 		 	 				'numermodelu' => $rowList['numermodelu'],
	 		 	 				'zdjecie'=> 'http://www.aaaaa.pl' . $rowList['zdjecie'],
	 		 	 				'ilosckolorow'=> $rowList['ilosckolorow'],
	 		 	 				'rozmiar'=> $rowList['rozmiar'],
	 		 	 				'rozdzielczosc'=> $rowList['rozdzielczosc'],
	 		 	 				'ppi'=> $rowList['ppi'],
	 		 	 				'rodzajLCD'=> $rowList['rodzajLCD'],
 	 		 	 			);		
 
 
							array_push($arrVal, $name);	
			$i++;			
	 	}
	 		 echo  json_encode($arrVal);	

 

1 odpowiedź

0 głosów
odpowiedź 22 maja 2017 przez Assasz Nałogowiec (30,460 p.)
wybrane 22 maja 2017 przez Zbigniew Andrysiak
 
Najlepsza
- robisz hiperłącze podając w adresie ścieżkę do pliku php

- wysyłasz żądanie na serwer Ajaxem (lepsze rozwiązanie)

Wtedy wykonujesz zapytanie do bazy, zwracasz wynik do JS, generujesz odpowiedni wiersz, przydzielasz do tabeli, wsadzasz dane i tyle.
komentarz 22 maja 2017 przez Zbigniew Andrysiak Bywalec (2,470 p.)

Pomysł jest ok, ale...

Jak zmusić przycisk + do tego, żeby załączał dane w nowym wierszu. 
Bo wszystko jest tutaj:
 

function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

Albo jeszcze inaczej - przecież dane otrzymuję bo mam w drugim pliku. Jak zrobić, żeby html.push odczytywało tylko np: key['cena']? Jest jakieś wyjście?

1
komentarz 22 maja 2017 przez Assasz Nałogowiec (30,460 p.)

W jQuery zrobiłbym to mniej więcej tak:

success: function(response)
{
      $.each(response, function(key, value)
     {
         $('<p><b>'+key.cena+'':</b> '+value.cena+'</p>).appendTo('#id_elementu');
     }
}

Btw. jeśli dodajesz nowy wiersz do tabeli, to używaj znaczników <tr><td> itd., do tego znaczników formatujących (<b>) się już nie używa, od tego jest CSS.

komentarz 22 maja 2017 przez Zbigniew Andrysiak Bywalec (2,470 p.)

A więc tak... Dziękuję Ci za podpowiedź. Bardzo mocno mi pomogłeś. Już wiem jak to zrobić. Poniżej rozwiązanie komuś może się przydać.

      function detailFormatter(value, row) {
          
          return '<p class="text-left">' +row.marka +'<img src="images/ceneo.png">Sprawdź na ceneo cena od 299zł<a href="'+row.cena+'">'+row.cena+' </a></p>';
      }

Gdzie row.marka i row.cena to odpowiednio marka i cena, które definiujemy w piku data.php.

Podobne pytania

0 głosów
1 odpowiedź 1,188 wizyt
pytanie zadane 14 września 2017 w JavaScript przez Caesar Początkujący (310 p.)
0 głosów
0 odpowiedzi 117 wizyt
pytanie zadane 23 maja 2017 w PHP przez Zbigniew Andrysiak Bywalec (2,470 p.)
0 głosów
3 odpowiedzi 867 wizyt
pytanie zadane 16 listopada 2016 w HTML i CSS przez tatar Użytkownik (740 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...