注文の種類に応じて上下の矢印を追加

私はデータベースからajax & PHPでデータを取得しています。返されるデータはテーブルとして表示されます。テーブルの列を昇順または降順に並べ替える機能を作成しました。 ascending order &の場合に表示される列名descending orderの場合、これはどのように行うことができますか？注文の種類に応じて上下の矢印を追加

HTMLコード

<head> 
    <link rel="stylesheet" href="../lib/css/bootstrap.min.css" type="text/css"/> 
    <script src="https://use.fontawesome.com/d7a6f6be38.js"></script> 
    <script type="text/javascript" src="../lib/js/jquery-3.1.1.min.js"></script> 
    <link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/> 
    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
</head> 
<div class="row"> 
    <div id="OrderTable"></div> 
</div>

PHPページの一部searchorders.php

<?php 
$output.='<hr /> 
    <table id="SearchResults" class="table table-striped table-bordered" style="width:auto;"> 
    <thead> 
    <tr> 
     <th>Order No.</th> 
     <th>Customer Name</th> 
     <th>Order Date</th> 
     <th>Category Name</th> 
     <th>Category Type</th> 
     <th>Quantity in Kilos</th> 
     <th>Delivery Date</th> 
     <th>Order Status</th> 
    </tr> 
    </thead> 
'; 

echo $output; 
?>

JavaScript関数

function SearchOrders() 
{ 
    document.getElementById("OrderTable").innerHTML=""; 
    document.getElementById("NoData").innerHTML=""; 
    document.getElementById("Results").style.display = 'none'; 

    startDate=document.getElementById("Start_Date").value; 
    endDate=document.getElementById("End_Date").value; 

    $.ajax({ 
     type:"POST", 
     url:"searchorders.php", 
     data: 
      { 
       'StartDate': startDate, 
       'EndDate':endDate 
      }, 
     success: function(data) 
     { 
      if (data == "Failed") 
      { 
       $('#NoData').append("No data Found!"); 
      } 
      else 
      { 
       $('#OrderTable').append(data); 
       document.getElementById("Results").style.display = 'block'; 

       $('#SearchResults').DataTable({"columnDefs": [ { 
           "targets": [0,4,5,6], 
           "orderable": false 
           }]}); 
      } 
     } 
    }) 
}

出典

2017-09-30 NewPHP

これは、学術的な教材でない限り、データテーブルのプラグインをチェックアウトします。 –

最初に上向き矢印を追加し、下向き矢印を下向き矢印に追加します。私はここにspanの中のテキストを使用しています。アイコンや何かで置き換えることができますが、idは同じものにしておいてください。

<th onclick="sortTable(1)"> 
    <span id="asc1">Up</span> 
    <span id="desc1">Down</span> 
    Customer Name 
</th> 
<th onclick="sortTable(2)"> 
    <span id="asc2">Up</span> 
    <span id="desc2">Down</span> 
    Order Date 
</th> 
<th onclick="sortTable(3)"> 
    <span id="asc3">Up</span> 
    <span id="desc3">Down</span> 
    Category Name 
</th>

次にCSSでそれらを隠し、あなたが関数にnを渡しているとあなたがソートすぎの方向を知っているので、jqueryのコードを書く次に

th>span{ 
    display:none; 
}

を好きなように多くの彼らのスタイル。 idをリバースエンジニアリングして、その矢印を表示します。

$('th>span').hide(); 
var idChange = '#'+ dir + n; 
$(idChange).show();

出典

2017-09-30 12:53:04 ab29007

注文の種類に応じて上下の矢印を追加

答えて

関連する問題