datatable 首行置顶(不影响自带排序)

最新推荐文章于 2022-07-25 13:55:18 发布

jadonyan

最新推荐文章于 2022-07-25 13:55:18 发布

阅读量2.2k

点赞数 3

文章标签： datatable

本文链接：https://blog.csdn.net/yjdjadon/article/details/81477114

版权

在网上找了很多关于置顶的说明，都不尽人意。后来转战google，终于找到一个大神写的方法。大概逻辑就是找到要置顶的那一行tr，把它移动到thead里面。

这里我放上一个自己测试通过的小demo，希望能帮到大家（毕竟我也花了一天时间搞这个。。。）

话不多说，直接上效果图：

下面是代码：

html:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
          <tr class="second">
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

$(document).ready( function () {
    var table = $('#example').DataTable({
        orderCellsTop: true,   //move sorting to top header
    });
    // Get the index of matching row.  Assumes only one match
  var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {    
    //check column 0 of each row for tradeMsg.message.coin
    return table.cell( rowIdx, 0 ).data() === 'Ashton Cox' ? true : false;
  } );
 
  // grab the data from the row
  var data = table.row(indexes).data();
 
  // populate the .second header with the data
  for (i = 0; i < data.length; i++) {
    $('.second').find('th').eq(i).html( data[i] );
  }
  
  // remove the row from the table
  table.row(indexes).remove().draw(false);
});

css

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

最后附上大神的地址：

https://m.datatables.net/forums/discussion/41314/how-to-fix-a-row-with-sorting-enabled

http://live.datatables.net/yejelujo/1/edit

jadonyan

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
datatable 首行置顶(不影响自带排序)

在网上找了很多关于置顶的说明，都不尽人意。后来转战google，终于找到一个大神写的方法。大概逻辑就是找到要置顶的那一行tr，把它移动到thead里面。这里我放上一个自己测试通过的小demo，希望能帮到大家（毕竟我也花了一天时间搞这个。。。）话不多说，直接上效果图：下面是代码：html:&lt;!DOCTYPE html&gt;&lt;html&gt;...
复制链接

扫一扫