javascript - 如何使用jquery ajax更改排序箭头升序和降序

Question

我正在按升序和降序对数据库中的数据进行排序，排序工作正常，但按钮/箭头除外，我希望它显示在带有 .column-sort 类的按钮内。我希望该按钮在订单为 desc 时显示向上箭头，并在订单为 asc 时显示向下箭头，例如 desc ">" 和 asc "<"。我尝试使用 $('#'+column_sort+'').append(arrowDir) 之类的追加，但如果它被放置在成功/完成（）之外，它每次都会追加。在ajax成功的内部按钮元素之后如何使它工作？

html

  <table>
    <thead class="thead_result">
      <tr>
        <th class="td-amount"><button  class="column-sort" id="income" data-order="desc"></button>Income</th>
        <th class="td-amount"><button  class="column-sort" id="expense" data-order="desc"></button>Expense</th>
      </tr>
    </thead>
    <tbody class="result"></tbody>
  </table>

//js

  <script>
        $(document).on('click', '.column-sort', function(){
            let column_sort = $(this).attr('id');
            let order       = $(this).data('order');
            let arrowDir = '';
            if (order == 'desc') {   
                arrowDir = '<i class="fa fa-angle-up"></i>';
            }else{
               arrowDir  = '<i class="fa fa-angle-down"></i>';
            }

            let ajax = $.ajax({
                url : '/getDaily',
                method:'post',
                data: {column_sort: column_sort, order: order},
                dataType: 'JSON',
            });
            ajax.done(function(data){
                //trying to reset column-sort to have desc ar asc
                $('#'+column_sort+'').attr('data-order', data.order);
                $('#'+column_sort+'').html(arrowDir);
                // data.order value to change desc to asc or desc to asc
                let thead = `
                  <tr>
                    <th class="td-amount"><button  class="column-sort" id="income" data-order="${data.order}"></button>Income</th>
                    <th class="td-amount"><button  class="column-sort" id="expense" data-order="${data.order}"></button>Expense</th>
                  </tr>
                  `;
                let html = '';
                $.each(data.result, function(k, v){
                     //mydata
                });
                
                $('.thead_result').html(thead);
                $('.result').html(html);
            })
        })
  </script>

//控制器

  public function getDaily(){
      $column_sort    = $this->request->getPost('column_sort');
      $order          = $this->request->getPost('order');

      if ($order == "desc") {
         $order = "asc";
      }else{
         $order = "desc";
      }

      foreach($this->model->getDaily() as $row){
        $output[] = [
             'income'      =>  $row->income,
             'expense'     =>  $row->expense,
        ];
      }

      return $this->response->setJSON([
        'result'          => $output,
        'order'           => $order,
      ]);
  }

标签： javascriptjqueryajax