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

Question

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);	

 

Answer 1

- 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.

Comments

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?

---

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.

---

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.