Question

要在SNO表头中添加排序功能。下面是该表的代码：

<table id='TimeLogtbleInfo' class='table table-bordered table-striped '>
    <thead style='background-color: #3d556d; color: white'>
        <tr>
            <th >SNO</th>
            <th>Emp Name</th>
            <th>Task</th>
            <th>Date</th>
            <th>Time</th>
            <th>Client Name</th>
            <th>Project Name</th>
            <th>Category Name</th>
            <th>ProjectType Name</th>
            <th>SubCategory Name</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 1

我不清楚您想要什么。如果您只需要排序符号设计，那么这应该可以完成工作：

tr {
    border: 1px solid black;
}
th, td {
    border: 1px solid black;
}
th.sort-by { 
    padding-right: 18px;
    position: relative;
}
th.sort-by:before,
th.sort-by:after {
    border: 4px solid transparent;
    content: "";
    display: block;
    height: 0;
    right: 5px;
    top: 50%;
    position: absolute;
    width: 0;
}
th.sort-by:before {
    border-bottom-color: #666;
    margin-top: -9px;
}
th.sort-by:after {
    border-top-color: #666;
    margin-top: 1px;
}

<table>
  <thead>
    <tr>
      <th class="sort-by">SNO</th>
      <th class="sort-by">Emp Name</th>
      <th class="sort-by">Task</th>
      <th class="sort-by">Date</th>
      <th class="sort-by">Time</th>
      <th class="sort-by">Client Name</th>
      <th class="sort-by">Project Name</th>
      <th class="sort-by">Category Name</th>
      <th class="sort-by">ProjectType Name</th>
      <th class="sort-by">SubCategory Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tbody>
</table>

Answer 2

您需要添加以下链接

<th >SNO<i class="fa fa-fw fa-sort"></i></th>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Answer 3

如果您需要所有列都可排序，则可以选择一个UI / Table插件，该插件可以为您工作，而不是自己编写代码。

jQuery Datatables 就是这样的插件，还具有许多其他功能。

Color_t ColorManager::kColorWhite;

$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

引用：https://datatables.net/

For Sorting Feature

在HTML表中添加排序功能

3 个答案: