排序不起作用，在引导程序中是数据表

时间：2017-04-10 07:27:57

标签： javascript jquery html twitter-bootstrap datatables

我在排序表时遇到问题。当我点击表格标题时，我的表格数据不会排序。即使使用＆＃34;显示10/25/50条目＆＃34; 以及搜索栏。

我试了很久但似乎没有用。这是我的代码。我不会遇到插件问题或我的编码问题。我从互联网上尝试了很多方法，但都没有用。我通过互联网连接在本地运行xampp。

＆＃13;
＆＃13; 
$(".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();
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

  • 在td
    • 中将th元素更改为thead
  • 从tbody循环
    • 中取出while
  • 在tr循环内添加表格行while元素以封闭表格单元格

答案 1 :(得分：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>
	<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>

相关问题
最新问题