排序不起作用，引导中的数据表
[英]sorting doesn't work, datatable in bootstrap
问题描述
我在对表格进行排序时遇到问题。 当我单击表格标题时，表格数据不会排序。 即使使用“显示10/25/50条目”和搜索栏。
我尝试了很长时间，但似乎无法正常工作。 这是我的代码。 我不是坐在插件问题或我的编码问题上。 我从互联网尝试了许多方法，但是所有方法都不起作用。 我正在通过Internet连接在本地运行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"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div> <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> </div> </div> </div> <div class="container"> <div class="jumpbotron"> <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <td>Date</td> <th>Subject</th> <td>Details</td> <td>Status</td> <td>ticket id</td> <td>Actions</td> </tr> </thead> <?php while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row. { $date=$row[2]; $subject=$row[3]; $detail=$row[4]; $status=$row[5]; $tickid=$row[0]; ?> <tbody method="post"> <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> </tbody> <?php } ?> </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> </body>
2 个解决方案
解决方案1
2 2017-04-10 11:53:32
- 将
td元素更改为theadth - 让
tbody退出while循环 - 在
while循环内添加表格行tr元素以封闭表格单元格
解决方案2
0 2017-04-10 12:43:47
我认为您必须像@ 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> <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>
清理您的代码：
$(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"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <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 while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row. { $date=$row[2]; $subject=$row[3]; $detail=$row[4]; $status=$row[5]; $tickid=$row[0]; ?> <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> </tr> <?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>
bootstrap datatable javascript在asp.net Repeater中不起作用
[英]bootstrap datatable javascript doesn't work in asp.net Repeater
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.