Nach oben und nach unten Pfeile nach Auftragsart

Ich erhalte Daten aus der Datenbank durch Ajax & PHP, die zurückgegebenen Daten wird als Tabelle angezeigt, ich erstellte eine Funktion zum Sortieren Tabelle Spalte aufsteigend oder absteigend, ich möchte Pfeile neben hinzufügen der Spaltenname im Fall von ascending order & unten im Fall von descending order, wie kann dies getan werden?Nach oben und nach unten Pfeile nach Auftragsart

HTML-Code

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

Teil von PHP-Seite 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 Funktion

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 
           }]}); 
      } 
     } 
    }) 
}

Quelle

2017-09-30 NewPHP

Auschecken DataTables Plug-in, es sei denn, dies ist eine akademische Übung. –

Zuerst summieren (für aufsteigend) und ab (für absteigend) Pfeile. Ich benutze hier Text innerhalb span, den Sie mit Symbolen oder etwas ersetzen können, aber behalten Sie die id auf ihnen das gleiche.

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

verstecken sie dann in der CSS und Stil sie mehr als Sie

wie

th>span{ 
    display:none; 
}

dann den jQuery-Code schreiben, da Sie n an die Funktion sind vorbei und Sie wissen, die Richtung der Art zu. also reverse engineer die id und zeigen diesen pfeil.

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

Quelle

2017-09-30 12:53:04 ab29007

Nach oben und nach unten Pfeile nach Auftragsart

Antwort

Verwandte Themen