当没有类型或值时，按 class 名称对 jQuery 数据表进行排序

Question

我正在使用数据表：https://www.datatables.net/

这是我的HTML：

    <div class="dataTable_wrapper">
        <table class="table table-striped table-bordered table-hover center" id="dataTables-example">
           <thead>
              <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                   <td>1</td>
                   <td>title 1</td>
                   <td><a href="./action-1"><span class="on"></span></a></td>
              </tr>
              <tr>
                   <td>2</td>
                   <td>title 2</td>
                   <td><a href="./action-2"><span class="off"></span></a></td>
              </tr>
              <tr>
                   <td>3</td>
                   <td>title 3</td>
                   <td><a href="./action-1"><span class="on"></span></a></td>
              </tr>
            </tbody>

我想用最后一列对 table 进行排序，但没有可排序的值...只有 class "on" 和 "off"。有没有我可以添加到 link 标签的属性，比如 rel 或其他可以放置 0/1 值的属性？或者我应该使用 JavaScript?

这是JS代码：

        $('#dataTables-example').DataTable({
            responsive: true,
            "order": []

        });

Answer 1

看看 dataTables columns / columnDefs render() 函数。您可以根据用途 return 各种内容或值：filter、display、type 或 sort。如果你想根据 <span> 有类 .on 或 .off 按 0 / 1 对列进行排序，你可以这样做:

var table = $('#dataTables-example').DataTable({
    columnDefs : [
        { 
          targets: [2],
          render: function ( data, type, full, meta ) {                  
              if (type == 'sort') {
                  return $(data).find('span').hasClass('on') ? 1 : 0;
              }  else {
                  return data;
              }    
          }   
       }
    ]                                     
});

演示 -> http://jsfiddle.net/9zvyhgb5/

当没有类型或值时，按 class 名称对 jQuery 数据表进行排序

Sorting jQuery dataTables by class name when there is no type or value

javascript

sorting

jquery

jquery-datatables