Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wybieranie kolumn z tablicy sql za pomocą jquey
Forum PHP.pl > Forum > Po stronie przeglądarki
slawekxx
13.02.2014, 17:57:43
Witam,

znalazłem taki sobie skrypt w jquery i chciałbym nim wybierać kolumny do wyświetlenie danych z bazy sql ... ogólnie chciałbym załączać wyłączać dane kolumny te, które mi są potrzebne w danym momencie 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. 	<title>StarTrackr!</title>
  7.  
  8. 	<link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/>
  9.   <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
  10.  
  11. 	<script src="../../lib/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
  12.   <script src="../../lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
  13. 	<script type="text/javascript" src="script.js"></script>
  14. </head>
  15. <body>
  16. 	<div id="container">
  17. 		<div id="header">
  18. 			<h1>StarTrackr!</h1>
  19. 		</div>
  20. 		<div id="content">
  21. 			<h2>Rankingi</h2>
  22.  
  23.  
  24. 			<div id="rankings">
  25. 			  <div class="list">
  26.   			  <h3>Wszyscy celebryci</h3>
  27.   				<select id="candidates" name="candidates" multiple="multiple" size="8">
  28.   					<option value="142">Staszek Ładny</option>
  29.   					<option value="142">Zbig Ziom</option>
  30.   					<option value="142">Mr Speaker</option>
  31.   					<option value="142">Zuza Z.</option>
  32.   					<option value="142">Di Dżej</option>
  33.   					<option value="142">Muza, Spółka Zło</option>
  34.   					<option value="142">Computadors</option>
  35.   					<option value="142">Baron von Jovi</option>
  36.   				</select>
  37.           <a href="#" class="invert">Odwróć zaznaczenie</a>
  38.         </div>
  39.  
  40.         <div class="list">
  41.           <h3>Lista A</h3>
  42.   				<select id="a-listers" name="a-listers" multiple="multiple" size="8">
  43.   					<option value="232">Jurek Co</option>
  44.   					<option value="232">Buba Tronik</option>
  45.   					<option value="142">Staszek Ładny</option>
  46.   					<option value="142">Głowa Bez Jeźdźca</option>
  47.   					<option value="142">Aniołki Prezesa</option>
  48.   				</select>
  49.           <a href="#" class="invert">Odwróć zaznaczenie</a>
  50.         </div>
  51.  
  52. 				<div id="controls">
  53. 				  <div>
  54. 				 	<label>Zamień:</label>
  55.   					<input type="button" id="swapLeft" value="&gt;" />	
  56.   					<input type="button" id="swapRight" value="&lt;" />
  57.           </div>
  58.  
  59.           <div>
  60.   					<label>Zamień wszystkie:</label>
  61.   					<input type="button" id="swapLeftAll" value="&gt;&gt;" />
  62.   					<input type="button" id="swapRightAll" value="&lt;&lt;" />
  63.           </div>
  64.  
  65.           <div>
  66.   					<label for="search">Szukaj:</label>
  67.             <input class="search" type="text" id="search" />
  68.           </div>
  69. 				</div>
  70. 			</div>
  71. 		</div>
  72.  
  73. 		<div id="footer">
  74. 			<p>
  75. 				&copy; Copyright 2010 CelebriTracker Productions
  76. 			</p>
  77. 		</div>
  78. 	</div>
  79. </body>
  80. </html>
  81.  
[HTML] pobierz, plaintext


Kod pliku script.js
[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.   $('#swapLeft').click(function() {
  3.     SWAPLIST.swap('#candidates', '#a-listers');
  4.   });
  5.   $('#swapRight').click(function() {
  6.     SWAPLIST.swap('#a-listers', '#candidates');
  7.   });
  8.   $('#swapLeftAll').click(function() {
  9.     SWAPLIST.swapAll('#candidates', '#a-listers');
  10.   });
  11.   $('#swapRightAll').click(function() {
  12.     SWAPLIST.swapAll('#a-listers', '#candidates');
  13.   });
  14.  
  15.   $('.invert').click(function(e) {
  16.     SWAPLIST.invert($(this).parent().find('select'));
  17.     e.preventDefault();
  18.   });
  19. $('#search').keyup(function() {
  20. 	SWAPLIST.search("#a-listers, #candidates", $(this).val());
  21. });
  22. });
  23.  
  24. var SWAPLIST = {};
  25. SWAPLIST.swap = function(from, to) {
  26.   $(from)
  27.     .find(':selected')
  28.     .appendTo(to);
  29. }
  30. SWAPLIST.swapAll = function(from,to) {
  31.   $(from)
  32.     .children()
  33.     .appendTo(to);
  34. }
  35. SWAPLIST.invert = function(list) {
  36.   $(list)
  37.     .children()
  38.     .attr('selected', function(i, selected) {
  39.       return !selected;
  40.     });
  41. }
  42. SWAPLIST.search = function(list, search) {
  43.   $(list)
  44.     .children()
  45.     .attr('selected', '')
  46.     .filter(function() {
  47.       if(search == ''){
  48.         return false;
  49.       }
  50.       return $(this)
  51.         .text()
  52.         .toLowerCase()
  53.         .indexOf(search) > - 1
  54.     })
  55.     .attr('selected', 'selected');
  56. }
  57.  
[HTML] pobierz, plaintext


czy się ktoś mam pomysł jak to zrobić ?
qbas-s
17.02.2014, 15:08:23
w jquery masz funkcję load + piszesz sobie skrypt do zaciągania danych z sql. Przed jej użyciem czyść tabele do której chcesz zaciągać nowe dane
slawekxx
23.02.2014, 07:03:28
Hmm... a czym mam te tablice czyścić Ajaxem czy CIF-em ;-) ... masz może jakiś przykład ?

qbas-s
23.02.2014, 11:17:41
przepraszam, źle Cię zrozumiałem. To co pisałem o tabeli zignoruj.

Robisz np coś takiego:

[JAVASCRIPT] pobierz, plaintext 
  1. $( "#objectID" ).load( "test.php", { "choices[]": [ "abc", "def" ] } );
[JAVASCRIPT] pobierz, plaintext


i w skrypcie test.php na podstawie danych wejściowych generujesz sobie fragment kodu dla widoku.
slawekxx
23.02.2014, 12:52:45
nie za bardzo wiem jak to mam zrobić
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.