2017-04-10 61 views
0

我有排序我的表的问题。当我点击我的表格标题时,我的表格数据不能排序。即使使用“显示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.使用HTML使用npm( https://www.npmjs.com/package/htmlhint)4.用你的大脑! **注意:**不知道它会做什么,你混合PHP代码和HTML,但它是可能的。 –

+0

我添加了所有缺失的标签。但是当我点击标题时,我的表格仍然没有排序 – Sypnoticjr

回答

2
  • 变化td元素ththead
  • 采取tbodywhile循环
  • 添加表行tr元素中while环附上表格单元格的
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>