2017-04-10 1 views
0

테이블을 정렬하는 데 문제가 있습니다. 내 표 머리글을 클릭하면 표 데이터가 정렬되지 않습니다. "show 10/25/50 항목"과 검색 창을 사용하는 경우에도 마찬가지입니다.정렬이 작동하지 않습니다. 부트 스트랩의 데이터 테이블

매우 오래되었지만 작동하지 않는 것 같습니다. 여기 내 코드가있다. 나는 플러그인 문제 또는 코딩 문제를 생각하지 않는다. 나는 인터넷에서 많은 방법을 시도했지만 모두 작동하지 않습니다. 인터넷 연결로 xampp을 로컬에서 실행하고 있습니다.

$(".contentContainer").css("min-height", $(window).height()); 
 

 
$("textarea").css("height", $(window).height() - 110); 
 

 
$("textarea").keyup(function() { 
 

 
    $.post("updatediary.php", { 
 
    diary: $("textarea").val() 
 
    }); 
 

 
}); 
 

 
$(document).ready(function() { 
 
    $('#example').DataTable(); 
 
});
.navbar-brand { 
 
    font-size: 1.8em; 
 
} 
 

 
#topContainer { 
 
    background-image: url("background.jpg"); 
 
    height: 400px; 
 
    width: 100%; 
 
    background-size: cover; 
 
} 
 

 
#topRow { 
 
    margin-top: 80px; 
 
    text-align: center; 
 
} 
 

 
#topRow h1 { 
 
    font-size: 300%; 
 
} 
 

 
.bold { 
 
    font-weight: bold; 
 
} 
 

 
.marginTop { 
 
    margin-top: 30px; 
 
} 
 

 
.center { 
 
    text-align: center; 
 
} 
 

 
.title { 
 
    margin-top: 100px; 
 
    font-size: 300%; 
 
} 
 

 
#footer { 
 
    background-color: #B0D1FB; 
 
    padding-top: 70px; 
 
    width: 100%; 
 
} 
 

 
, 
 
marginBottom { 
 
    margin-bottom: 30px; 
 
} 
 

 
.appstoreImage { 
 
    width: 250px; 
 
} 
 

 
.table { 
 
    table-layout: fixed; 
 
} 
 

 
.table td { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}
<body data-spy="scroll" data-target=".navbar-collapse"> 
 

 
    <div class="navbar navbar-inverse"> 
 

 
    <div class="container"> 
 

 
     <div class="navbar-header"> 
 

 
     <a class="navbar-brand">IT Services</a> 
 

 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     \t \t \t <span class="sr-only">Toggle navigation</span> 
 
    \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t <span class="icon-bar"></span> 
 
     \t \t </div> 
 
    \t \t 
 
    \t \t 
 
    \t \t <div class="collapse navbar-collapse"> 
 
    \t \t \t 
 
     \t \t \t <ul class= "navbar-nav nav pull-right"> 
 
    \t \t \t \t <li class="active"><a href="mainpage.php">Main</a></li> 
 
    \t \t \t \t <li><a href="input.php">New Input</a></li> 
 
     \t \t \t \t <li><a href="includes/logout.inc.php">Log Out</a></li> 
 
     \t \t \t 
 
     \t \t \t 
 
     \t \t </div> 
 

 
    \t \t </div>  \t \t 
 
     \t </div> \t 
 
    
 
     <div class="container"> 
 
    \t <div class="jumpbotron"> 
 
    \t \t <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
 
    \t \t 
 
    \t \t \t \t <thead> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td>Date</td> 
 
    \t \t \t \t \t \t <th>Subject</th> 
 
    \t \t \t \t \t \t <td>Details</td> 
 
    \t \t \t \t \t \t <td>Status</td> 
 
    \t \t \t \t \t \t <td>ticket id</td> 
 
    \t \t \t \t \t \t <td>Actions</td> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t 
 
    \t \t \t \t </thead> 
 
    \t \t \t \t 
 
    \t \t <?php \t \t 
 
    \t \t \t \t while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row. 
 
    \t \t \t \t { 
 
    \t \t \t \t \t 
 
    \t \t \t \t \t $date=$row[2]; 
 
    \t \t \t \t \t $subject=$row[3]; 
 
    \t \t \t \t \t $detail=$row[4]; 
 
    \t \t \t \t \t $status=$row[5]; 
 
    \t \t \t \t \t $tickid=$row[0]; 
 
     
 
    \t \t \t \t ?> 
 
    \t \t \t \t 
 
    \t \t \t \t <tbody method="post"> 
 
    \t \t \t \t \t 
 
    \t \t \t \t \t <td class="col-md-1"><?php print_r($date); ?></td> 
 
    \t \t \t \t \t <td class="col-md-1"><?php print_r($subject); ?></td> 
 
    \t \t \t \t \t <td class="col-sm-2"><?php print_r($detail); ?> </td> 
 
    \t \t \t \t \t <td class="col-md-1"><?php print_r($status); ?></td> 
 
    \t \t \t \t \t <td class="col-md-1"><?php echo $tickid ; ?></td> 
 
    \t \t \t \t \t <td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td> 
 
    \t \t \t \t \t 
 
    \t \t \t \t </tbody> 
 
    \t \t \t \t 
 
    \t \t \t \t 
 
    \t \t \t \t <?php } ?> 
 
    \t \t \t </table> 
 
    \t </div> 
 
    \t </div> 
 
     
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    \t <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script> 
 
    \t <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script> 
 
     </body>

+0

은 내가 실종 무엇 태그 알 수 있습니까? – Sypnoticjr

+0

여러 가지 방법 : 1. IDE의 문제 패널을 사용하십시오. 2.이 도구를 사용하십시오 : https://validator.w3.org/ 또는 http://htmlhint.com/ 3. npm을 사용하여 HTML hinters 사용 https://www.npmjs.com/package/htmlhint) 4. 뇌를 사용하십시오! ** 참고 : ** 당신이 HTML로 PHP 코드를 섞어서 어떻게할지는 모르지만 가능합니다. –

+0

누락 된 태그를 모두 추가했습니다. 그러나 헤더를 클릭해도 정렬되지 않은 테이블 – Sypnoticjr

답변

2
  • 변경 thead
  • 에서 th-td 요소 while 루프
  • 테이블 셀을 둘러싸 테이블 행을 tr 요소 루프 while 안에 추가에서 tbody을 가지고
0

@ Gyrocode.com처럼 코드를 정리해야한다고 생각합니다. 아래 코드가 작동합니다.

$(document).ready(function() { 
 
    $('#example').DataTable(); 
 
});
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 
<table id="example" class="table table-striped table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>Date</th> 
 
     <th>Subject</th> 
 
     <th>Details</th> 
 
     <th>Status</th> 
 
     <th>ticket id</th> 
 
     <th>Actions</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <!-- start to loop here --> 
 
    <tr> 
 
     <td class="col-md-1">10/04/2017</td> 
 
     <td class="col-md-1">ABC</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">1546546</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="col-md-1">11/04/2017</td> 
 
     <td class="col-md-1">DEF</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">5646156</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="col-md-1">12/04/2017</td> 
 
     <td class="col-md-1">ZXY</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">454658</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">OPQ</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">56446</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
     <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">ggg</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">52527</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
     <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">rtr</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">2577</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
     <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">rtfe</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">7254</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
     <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">rggthg</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">7527</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
     <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">frgbf</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">52727</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
     <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">grege</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">5872</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
      <tr> 
 
     <td class="col-md-1">13/04/2017</td> 
 
     <td class="col-md-1">gtehtehte</td> 
 
     <td class="col-sm-2">blablabla</td> 
 
     <td class="col-md-1">Oke</td> 
 
     <td class="col-md-1">5872</td> 
 
     <td class="col-md-1"><a href="#" id="submit">Details</td> 
 
    </tr> 
 
    <!-- end loop --> 
 
    <tbody> 
 
</table> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

정리 당신은 당신의 코드 :

$(document).ready(function() { 
 
    $('#example').DataTable(); 
 
});
<div class="container"> 
 

 
    <div class="navbar-header"> 
 

 
    <a class="navbar-brand">IT Services</a> 
 

 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     \t \t <span class="sr-only">Toggle navigation</span> 
 
    \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t <span class="icon-bar"></span> 
 
     </button> 
 

 

 
    <div class="collapse navbar-collapse"> 
 

 
     <ul class="navbar-nav nav pull-right"> 
 
     <li class="active"><a href="mainpage.php">Main</a></li> 
 
     <li><a href="input.php">New Input</a></li> 
 
     <li><a href="includes/logout.inc.php">Log Out</a></li> 
 
     </ul> 
 

 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="jumpbotron"> 
 
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
 

 
     <thead> 
 
     <tr> 
 
      <th>Date</th> 
 
      <th>Subject</th> 
 
      <th>Details</th> 
 
      <th>Status</th> 
 
      <th>ticket id</th> 
 
      <th>Actions</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody method="post"> 
 

 
     <?php \t \t 
 
    \t \t \t \t while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row. 
 
    \t \t \t \t { 
 
    \t \t \t \t \t 
 
    \t \t \t \t \t $date=$row[2]; 
 
    \t \t \t \t \t $subject=$row[3]; 
 
    \t \t \t \t \t $detail=$row[4]; 
 
    \t \t \t \t \t $status=$row[5]; 
 
    \t \t \t \t \t $tickid=$row[0]; 
 
     
 
    \t \t \t \t ?> 
 
      <tr> 
 
      <td class="col-md-1"> 
 
       <?php print_r($date); ?> 
 
      </td> 
 
      <td class="col-md-1"> 
 
       <?php print_r($subject); ?> 
 
      </td> 
 
      <td class="col-sm-2"> 
 
       <?php print_r($detail); ?> </td> 
 
      <td class="col-md-1"> 
 
       <?php print_r($status); ?> 
 
      </td> 
 
      <td class="col-md-1"> 
 
       <?php echo $tickid ; ?> 
 
      </td> 
 
      <td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td> 
 
    \t \t \t \t \t 
 
    \t \t \t \t 
 
    \t \t \t </tr> 
 
    \t \t \t \t 
 
    \t \t <?php } ?> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
</div> 
 
     
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

관련 문제