将排序箭头添加到类似表格分类器

时间：2013-07-14 12:53:18

标签： jquery css

我正在尝试像tablesorter插件那样向我的表添加双箭头（向上和向下）。

这是我的fiddle。出于某种原因，甚至没有一个箭头显示在jsfiddle中，但它可以在我的原始表格上运行。

我试过了：

$("table th").addClass("headerSortUp");
$("table th").addClass("headerSortDown");

但它没有用。知道怎么做吗？

9 个答案:

答案 0 :(得分：11)

最佳解决方案没有图片，纯CSS 。只需将类名headerSortDown和headerSortUp放在td或th行，就会显示插入符号。

table td,
table th {
  border: 1px solid silver;
}

.headerSortDown:after,
.headerSortUp:after {
  content: ' ';
  position: relative;
  left: 2px;
  border: 8px solid transparent;
}

.headerSortDown:after {
  top: 10px;
  border-top-color: silver;
}

.headerSortUp:after {
  bottom: 15px;
  border-bottom-color: silver;
}

.headerSortDown,
.headerSortUp {
  padding-right: 10px;
}
<table>
  <thead>
    <tr>
      <th class="headerSortDown">ID</th>
      <th class="headerSortUp">Username</th>
      <th>Fullname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jenny</td>
      <td>Jenny Smith</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Tom</td>
      <td>Tom Doe</td>
    </tr>
  </tbody>
</table>

另请查看我的JSFiddle：http://jsfiddle.net/rTXXz/以获取一个工作示例。

更新：已修复Chrome

答案 1 :(得分：3)

我在Chrome中获得invalid property value。

引用它有效：

background: url("data:image/gif;base64, R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw=") no-repeat 99%;

我也将双箭头转换为base64。

JSFiddle

答案 2 :(得分：2)

问题在于您的.headerSortUp背景。我用下面的内容改了它：

background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;

jsFiddle with absolute bg

答案 3 :(得分：2)

这是一个内联的下降箭头。不幸的是，我不知道如何缩小数据，但生成的图像大小相同。

background: url('data:image/gif;base64,R0lGODlhFQAEAPcAAAAAACMtMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAVAAQAAAgaAP8JHCgwgMGDAQgqXIgw4cKHAw9CnFhwYkAAOw==') no-repeat 99%;

答案 4 :(得分：1)

我能够使用其他背景图像而不是您正在使用的图像来使其工作。也许这可以让你对这个问题有所了解：

.headerSortUp {
  background: url(http://placehold.it/25x25) no-repeat 99%;
}
.headerSortDown {
  background: url(http://placehold.it/25x25) no-repeat 99%;
}

Fiddle

答案 5 :(得分：0)

注意：我正在添加这个答案，因为它提供了一种在不使用图像的情况下添加箭头的替代方法，但确实遵循了将箭头保留在背景中的逻辑。

一种在没有图像的情况下添加箭头同时保持图像样式的方法（只需要调整它的味道，我没有优化div中的div或逻辑〜更多的概念证明（快速）原型））。这种方法的另一个好处是，您可以轻松地更改箭头着色类加上如果您将两个箭头放在单独的div中，您甚至可以在已经选中时隐藏一个（目前它们只是在悬停时单独更改颜色）。

See the example in action！

HTML 

<table class="test-table">
  <tr class="headRow">
    <th>
<div class="table-head-container">
    <div class="table-head-background">
      <div class="right-text">
        <div class="small-frame">
            <div class="up-arrow">&#9650</div>
            <div class="down-arrow">&#9660</div>
        </div>
      </div>
    </div>
  <div class="Col-header">First</div>
</div>
    </th>
    <th>
<div class="table-head-container">
    <div class="table-head-background">
      <div class="right-text">
        <div class="small-frame">
            <div class="up-arrow">&#9650</div>
            <div class="down-arrow">&#9660</div>
        </div>
      </div>
    </div>
  <div class="Col-header">Last</div>
</div>
     </th>
    <th>
<div class="table-head-container">
    <div class="table-head-background">
      <div class="right-text">
        <div class="small-frame">
            <div class="up-arrow">&#9650</div>
            <div class="down-arrow">&#9660</div>
        </div>
      </div>
    </div>
  <div class="Col-header">Phone</div>
</div>
    </th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>555-5555</td>
  </tr>
  <tr class="evenRow">
    <td>Jane</td>
    <td>Smith</td>
    <td>555-5555</td>
  </tr>
  <tr>
    <td>Homer</td>
    <td>Simpson</td>
    <td>555-5555</td>
  </tr>
</table>

CSS 

.table-head-container {
   position: relative;
  color: white;
  max-width: 100px;
}

.test-table {
  border: solid black 1px;
}

.headRow {
  background-color: green;
  color: white;
}

.headRow > th {
  border: solid black 2px;
  padding: 10px 20px 10px 5px;
  min-width:100px;
  font-size: 1.6em
}

.evenRow {
  background-color: #E8E8E8;
}

table {
  border-collapse: collapse;
}

tr > td {
  border: solid black 1px;
  padding: 5px;
}

.Col-header {
  text-align: left;
}

.table-head-background {
   position: absolute;
   top: -10;
   left: 15;
   bottom: 0;
   right: 0;
   z-index: 1;
  width: 0;
  color: white;
  background-color:green;
}

.table-head-background > .right-text {
  text-align: right;
}

.table-head-background > .right-text > .small-frame {
  position: absolute;
  left: 80px;
  width: 5px !important;
  word-wrap: break-word;
}

.table-head-background > .right-text > .small-frame > .up-arrow, .table-head-background > .right-text > .small-frame > .down-arrow {
font-size: .8em;
}

.table-head-background > .right-text > .small-frame > .up-arrow:hover, .table-head-background > .right-text > .small-frame > .down-arrow:hover {
    color: blue !important;
}

答案 6 :(得分：0)

如果您通过以下方式使用引导程序：

th, td {
    border: 1px solid black;
    text-align: center !important;
    font-size: 0.8rem !important;
  }

  td:hover, th:hover {
    -webkit-box-shadow: 0 0 5px -1px rgba(115, 127, 255, 1);
    -moz-box-shadow: 0 0 5px -1px rgba(115, 127, 255, 1);
    box-shadow: 0 0 5px -1px rgba(115, 127, 255, 1);
    border: 1px solid rgba(115, 127, 255, 1) !important;
  }

  th i{
     cursor: pointer !important;
  }

  th i:hover{
     color: red !important;
  }
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<table>
    <thead>
    <tr>
      <th>
        <div class="d-flex flex-row align-items-center">
          <span>ID</span>
          <div class="d-flex flex-column ml-2">
            <i class="fa fa-caret-up"></i>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
      </th>
      <th>
        <div class="d-flex flex-row align-items-center">
          <span>UserName</span>
          <div class="d-flex flex-column ml-2">
            <i class="fa fa-caret-up"></i>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
      </th>
    </tr>
    </thead>
  </table>

答案 7 :(得分：0)

以下示例基于添加到data-sort-dir元素上的th属性应用样式。

data-sort-dir属性的值可以为asc或desc，并在用户单击标题时通过javascript添加和删除。

$('table.table-sortable th').on('click', function(e) {
  sortTableByColumn(this)
})

function sortTableByColumn(tableHeader) {
  // extract all the relevant details
  let table = tableHeader.closest('table')
  let index = tableHeader.cellIndex
  let sortType = tableHeader.dataset.sortType
  let sortDirection = tableHeader.dataset.sortDir || 'asc' // default sort to ascending

  // sort the table rows
  let items = Array.prototype.slice.call(table.rows);
  let sortFunction = getSortFunction(sortType, index, sortDirection)
  let sorted = items.sort(sortFunction)

  // remove and re-add rows to table
  for (let row of sorted) {
    let parent = row.parentNode
    let detatchedItem = parent.removeChild(row)
    parent.appendChild(row)
  }

  // reset heading values and styles
  for (let header of tableHeader.parentNode.children) {
    header.classList.remove('currently-sorted')
    delete header.dataset.sortDir
  }

  // update this headers's values and styles
  tableHeader.dataset.sortDir = sortDirection == 'asc' ? 'desc' : 'asc'
  tableHeader.classList.add('currently-sorted')
}

function getSortFunction(sortType, index, sortDirection) {
  let dir = sortDirection == 'asc' ? -1 : 1
  switch (sortType) {
    case 'text': return stringRowComparer(index, dir);
    case 'numeric': return numericRowComparer(index, dir);
    default: return stringRowComparer(index, dir);
  }
}

// asc = alphanumeric order - eg 0->9->a->z
// desc = reverse alphanumeric order - eg z->a->9->0
function stringRowComparer(index, direction) {
  return (a, b) => -1 * direction * a.children[index].textContent.localeCompare(b.children[index].textContent)
}

// asc = higest to lowest - eg 999->0
// desc = lowest to highest - eg 0->999
function numericRowComparer(index, direction) {
  return (a, b) => direction * (Number(a.children[index].textContent) - Number(b.children[index].textContent))
}
table.table-sortable th.currently-sorted[data-sort-dir="asc"]::after {
    content: "\25b2";
}

table.table-sortable th.currently-sorted[data-sort-dir="desc"]::after {
    content: "\25bc";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-sortable">
    <thead>
        <tr>
            <th data-sort-type="text">Course</th>
            <th data-sort-type="numeric">In Progress</th>
            <th data-sort-type="numeric">Not Started</th>
            <th data-sort-type="numeric">Passed</th>
            <th data-sort-type="numeric">Failed</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>How to be good at stuff</td>
        <td>0</td>
        <td>1000</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Quantum physics for artists</td>
        <td>200</td>
        <td>6</td>
        <td>66</td>
        <td>66</td>
      </tr>
      <tr>
        <td>The best way to skin a cat</td>
        <td>34</td>
        <td>16</td>
        <td>200</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Human cookbook</td>
        <td>4</td>
        <td>7</td>
        <td>4</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Aristocracy rules</td>
        <td>100</td>
        <td>3</td>
        <td>6</td>
        <td>18</td>
      </tr>
    </tbody>
</table>

答案 8 :(得分：0)

使用Unicode字符的另一种方法

从默认插入符开始，显示未排序的表格

<th>Table Column ▶</th>

在排序时，根据排序顺序并使用Jquery，我这样做

$(this).text($(this).text().slice(0,-2) + " ▲")

或

$(this).text($(this).text().slice(0,-2) + " ▼")

尽管有一件事-设置了插入符后，对另一列进行排序并不会重置前一列的插入符。不确定这是一个问题，但如果确实成为问题，则需要一个函数来重置其他列标题的插入符号。

这是我的 JSFiddle

相关问题
最新问题