没有类型或值时,按类名称对jQuery dataTables进行排序

Mat*_*icz 2 javascript sorting jquery jquery-datatables

我正在使用DataTables: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>
Run Code Online (Sandbox Code Playgroud)

我想用最后一列对该表进行排序,但是没有排序的价值……只是类“ on”和“ off”。我可以添加诸如rel之类的链接标记或放置0/1值的东西吗?还是应该使用JavaScript来做到这一点?

这是JS代码:

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

        });
Run Code Online (Sandbox Code Playgroud)

dav*_*rad 6

看一下dataTables columns/ columnDefs render()函数。您可以根据使用目的不同返回的内容或值:filterdisplaytypesort。如果要基于具有类或的0/ 对列进行排序,可以执行以下操作:1<span>.on.off

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;
              }    
          }   
       }
    ]                                     
});
Run Code Online (Sandbox Code Playgroud)

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