根据订单类型添加上下箭头

Question

I am getting data from database through ajax & PHP, the returned data is shown as a table, i created a function to sort table column ascending or descending, i want to add arrows beside the column name to show up in case of ascending order & down in case of descending order , how can this be done? 我正在通过ajax和PHP从数据库中获取数据，返回的数据显示为表格，我创建了一个对表格列的升序或降序进行排序的函数，我想在列名旁边添加箭头以在ascending order情况下显示＆如果descending order ，该怎么办？

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

Part of PHP page searchorders.php 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 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
                              }]});
            }
        }
    })
}

Answer 1

First add up(for ascending) and down(for descending) arrows. 首先添加向上（向上）和向下（向下）箭头。 I am using text inside span here which you can replace with icons or something but keep the id on them the same. 我在这里使用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>

Then hide them in the css and style them more as you like 然后将它们隐藏在CSS中，并根据自己的喜好对其进行样式设置

th>span{
  display:none;
}

Then write the jquery code since you are passing n to the function and you know the direction of sort too. 然后编写jquery代码，因为您正在将n传递给函数，并且您也知道排序的方向。 so just reverse engineer the id and show that arrow. 因此，只需对ID进行反向工程并显示该箭头即可。

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

根据订单类型添加上下箭头

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-30 12:53:04

根据订单类型添加上下箭头

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-30 12:53:04

解决方案1
0 已采纳 2017-09-30 12:53:04