테이블 열을 정렬 가능하게 만드는 방법

열 머리글을 클릭 한 후 다음 표에서 열을 정렬하려면 어떻게합니까? 제품 이름 및 가격을 오름차순 및 오름차순으로 표시하고 싶습니다. 나는 여전히 PHP에서 초보자이므로 제발 판단하지 마시길 바랍니다 :) 어떤 도움을 주셨습니다.테이블 열을 정렬 가능하게 만드는 방법

<table style="width:50%" id="table1" align="center"> 
    <tr> 
    <th>Product Name</a></th> 
    <th>Price</th> 
    <th>Image</th> 
    <th>Quantity</th> 
    <th>Buy</th> 
    </tr> 
<?php 
$connection = mysqli_connect('localhost','root','','part2'); 
$query="SELECT * FROM products"; 
$result=mysqli_query($connection, $query); 
while ($row=mysqli_fetch_assoc($result)){ 
    echo "<tr>"; 
    echo "<td>"; 
    echo $row['ProductName']; 
    echo "</td>"; 
    echo "<td>"; 
    echo "$".$row['Price']; 
    echo "</td>"; 
    echo "<td>"; 
    echo ' <img src="./images/'.$row['Image'].'" style="width:50px;height:50px"/><br />'; 
    echo "</td>"; 
    echo "<td>"; 
    echo "<form method='post' action='buy.php'>"; 
    echo "<fieldset>"; 
    echo "<input type='number' name='quantity' style='width:30px'/>"; 
    echo "</fieldset>"; 
    echo "</form>"; 
    echo "</td>"; 
    echo "<td>"; 
    echo '<a href="buy.php?id='. $row['ProductID'].'">Buy</a>'; 
    echo "</td>"; 
    echo "</tr>"; 
} 
    ?> 
</table>

출처

2015-01-05 Beda

... –

당신은 자바 스크립트 솔루션에 열려 있습니까? –

예 javascript가 더 나은 해결책입니다. 이렇게하면 서버의 다른 요청을 피할 수 있습니다. https://datatables.net/ – scraaappy

Datatables here을 살펴보십시오. 당신이 필요로하는 것 이상을하는 JQuery 플러그인.

제공되는 링크는 작동시키기 위해해야 할 모든 것을 설명하고 사이트에서 작동하는 데모를 제공하여 귀하에게 적합한 지 여부를 결정합니다.

사용 방법에 대한 빠른 안내를 드리겠습니다. 또한처럼 사용할 포함 할 수있는 CSS 파일이

<head> 
    <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> 
</head>

HTML

당신의 머리 태그 사이에 콘텐츠 전송 네트워크 (CDN)에 호스팅 된 Datatables JS 파일에 대한 참조를 포함 이

<head> <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> <link href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css"> </head>

최종 작업은 JQuery를 사이트에 포함하고 Javascript 프레임 워크는 작업을 수행하는 데 필요한 코드의 양과 가장 자유롭게 사용할 수있는 미리 만들어진 제 3 자 플러그인의 사용을 허용합니다. 다시 JQuery 프레임 워크의 CDN 호스트 복사본을 사용할 수 있습니다.
<head> <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> // datatable javascript <link href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css"> // datatables css <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> //jquery </head>

는 예를 들어 myJSFile.js에 대한 있도록 확장은 .js와의 js 파일을 생성하고 경로를 잊지 말아 상위 폴더 내부에 위치하는 경우는, 이전에했던 것처럼 헤더에 대한 참조를 포함한다. 여기 JQuery와

<head> 
    <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>  // datatable javascript 
    <link href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">    // datatables css 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> //jquery 
    <script type="text/javascript" src="myJSFile.js"></script> 
</head>

은 단순히 자바 스크립트

$(document).ready(function() { $('#Table1').DataTable(); });

의 선택으로 그 클래스/ID를 사용, 일반 테이블이 데이터 테이블 만들기 위해 가장 쉬운 부분입니다.ready() 함수는 스크립트가 언제 실행될 것인지, 즉 DOM 계층 구조가 만들어 졌는지 결정합니다.

출처

2015-01-05 21:33:44

@Beda 안녕하세요, 네 선 $ (문서) .ready (function() { $ ('# Table1'). DataTable(); }); 당신이 배치 경우 myJSFile.js는 다음 경로가 SRC = "스크립트/myJSFile.js"과 같이 될 것입니다 예를 들어, "스크립트"라는 포함 된 폴더 안에 파일을 언급 할 가치가 당신의 myJSFile.js –

@Beda 그것 간다. 희망이 당신의 질문에 대답했다 그리고 만약 내가 아니라면 더 당신을 도울 수 행복보다. 당신은 당신은 나에게 많은 도움이 –

:) 요구된다 할 일은, 당신을 감사합니다, 예상대로 작동하는 것 같다 :) – Beda

여기에 한 가지 방법이 있습니다. 먼저 PHP 데이터를 가져옵니다. 당신은 당신의 $ 쿼리 문자열에서 SORT BY "포함 할 수

<?php 
$connection = mysqli_connect('localhost','root','','part2'); 
$query="SELECT * FROM products"; 
$result=mysqli_query($connection, $query); 
while ($row[$x]=mysqli_fetch_assoc($result)){ 
$x++; 
} 
?>

테이블을 작성

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Product Name</a></th> 
    <th>Price</th> 
    <th>Image</th> 
    <th>Quantity</th> 
    <th>Buy</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
</tbody> 
</table>

은 당신과 같이 PHP에서 데이터를 삽입 할 수 있습니다..

이

<td> <?php echo $row[0]['price']; ?></td> 
<td> <?php echo $row[0]['price']; ?></td> 
<td> <?php echo $row[0]['price']; ?></td>

지금을 가져 라이브러리에 추가하십시오. 머리 태그에 삽입하십시오 :

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

이 페이지의 하단이 포함 :

<script> 
$(document).ready(function() 
    { 
     $("#myTable").tablesorter({sortList: [[0,0], [1,0]]}); 
    } 
); 
</script>

이 tablesorter에서이 모든 것을 얻었다!

출처

2015-01-05 21:29:11 ZenStein

며칠 전 나는이 필요하고 나는 DataTable을 https://datatables.net/ 로드에게 도서관이처럼

$(document).ready(function(){ 
    $('#myHtmlTableName').DataTable(); 
});

간단을 발견했다. 내가 약속하는 매력처럼 작동 할거야. 게다가 그것은 청초하고 많은 다른 기능으로 보일 것입니다. 거 일부 자바 스크립트가 될 것

출처

2015-01-05 22:43:38 ivg

테이블 열을 정렬 가능하게 만드는 방법

답변

관련 문제