stackoom
  简体   繁体   中英

sorting doesn't work, datatable in bootstrap

 原文  2017-04-10 07:27:57  2   2    javascript/ jquery/ html/ twitter-bootstrap/ datatables

Question

I've got a problem with sorting my table. When I click on my table header, my table data don't sort. Even with using the "show 10/25/50 entries" and also the search bar.

I tried very long but seems not working. Here is my code. I don't is sit the plugin problem or my coding problem. I've tried many ways from the internet but all dont work. I'm running xampp locally with internet connection. 

 $(".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 answers

solution1
 2  2017-04-10 11:53:32

  • Change td elements to th in thead
  • Take tbody out of while loop
  • Add table row tr element inside while loop to enclose table cells

solution2
 0  2017-04-10 12:43:47

I think you must clean up your code a little bit like @Gyrocode.com said. Code below works. 

 $(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>

Cleanup you your code: 

 $(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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question date sorting doesn't work in the datatable jQuery button doesn't work after sorting datatable Bootstrap DataTable doesn't work as described in plugin docs Bootstrap Popover in JQuery Datatable doesn't work after search bootstrap datatable javascript doesn't work in asp.net Repeater Datatable filter doesn't work DataTable doesn't work (jQuery) Bootstrap doesn't work with apache Masonry doesn't work with Bootstrap 3 Bootstrap toggle doesn't work
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM