データテーブル内の固定行ソート

Question

データテーブルの先頭にいくつかの固定行を設定したいとします。

これは私のDataTableの設定です：私は、次のように行っている

var oTable = $('#transactions').dataTable({ 
    "aaSorting": [ [0,'desc'] ], 
    "bFilter": false, 
    "bSort": true, 
    "aaSorting": [[3,'desc']], // default search colums 
    //   "aaSortingFixed": [[3,'desc']], 
    "bPaginate": true, 
    "bProcessing": true, 
    "sPaginationType": "full_numbers", 
    "asStripeClasses": [ 'monitoring-table-new' ], 
    "bAutoWidth": false, 
    "aoColumns": [ 
     { "sType": "custom", 
      "sClass": "td-date-size-cell", 
      "fnRender": function (oObj, sVal) { 
       return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="date"><em>' + sVal + '</em></span></div></div>'; 
      } 
     }, 
     { "sType": "custom", 
      "sClass": "td-transaction-size-cell", 
      "fnRender": function (oObj, sVal) { 
       return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="transaction"><em>' + sVal + '</em></span></div></div>'; 
      } 
     }, 
     { "sType": "custom", 
      "sClass": "td-client-size-cell", 
      "fnRender": function (oObj, sVal) { 
       return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="client"><div>' + sVal + '</div></span></div></div>'; 
      } 
     }, 
     { "sType": "custom", 
      "sClass": "td-value-size-cell", 
      "fnRender": function (oObj, sVal) { 
       return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="value"><em>' + sVal + '</em></span></div></div>'; 
      } 
     }, 
     { "sType": "custom", 
      "sClass": "td-status-size-cell", 
      "fnRender": function (oObj, sVal) { 
       return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="status"><div>' + sVal + '</div></span></div></div>'; 
      } 
     }, 
    ], 
    "sAjaxSource": '<?php echo url_for('@test?sf_format=json'); ?>', 

}); 

：

jQuery.fn.dataTableExt.oSort['custom-asc'] = function(x,y) { 
     if (x.indexOf("MY VALUE") != -1) return -1; // keep this row at top 
     if (y.indexOf("MY VALUE") != -1) return 1; // keep this row at top 

     return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
    }; 

    jQuery.fn.dataTableExt.oSort['custom-desc'] = function(x,y) { 
     if (x.indexOf("MY VALUE") != -1) return 1; // keep this row at top 
     if (y.indexOf("MY VALUE") != -1) return -1; // keep this row at top 

     return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
    }; 

これはトップの位置にテキストで "MY VALUE" を持つ行を維持します。しかし、問題は、私が他の列をソートすると、 "固定"行がテーブルの上に残っていないことです。

すべてのソリューションはありますか？

Answer 1

これは簡単ではありません、あなたができることの一つは、custom datasource sorting股関節でソートカスタムが

// var oTable; 
var onTopValues = new Array("Litige", "5410"); 

/* disable asc sorting for specific rows */ 
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(x,y) { 

     if (isOnTop(x)) return -1; // keep this row at top 
     if (isOnTop(y)) return 1; // keep this row at top 

     return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['custom-desc'] = function(x,y) { 
     if (isOnTop(x)) return -1; // keep this row at top 
     if (isOnTop(y)) return 1; // keep this row at top 

     return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
}; 

function isOnTop(s) { 
     // search for on top values 
     for (var i = 0; i < onTopValues.length; i++) { 
      if (s === onTopValues[i]) { 
      return true; 
      } 
     } 

     return false; 
} 
//custom datasource 
$.fn.dataTableExt.afnSortData['custom-ontop'] = function (oSettings, iColumn) 
{ 
    var aData = []; 
    //prepare the data 
    $('td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function(){ 
    //If the last column of this row should stay on top, return the value of the 
    //last row as datasource 
    if(isOnTop($(this).closest('tr').find('td:last').text())){ 
     aData.push($(this).closest('tr').find('td:last').text()); 
    }else{ 
     //otherwise return this row as datasource 
     aData.push($(this).text()); 
    } 
    }); 

    return aData; 
}; 


$(document).ready(function() { 

      /* Apply custom classes to table headers */ 
     $.fn.dataTableExt.oStdClasses.sSortAsc = "custom_asc"; 
     $.fn.dataTableExt.oStdClasses.sSortDesc = "custom_desc"; 


    oTable = $('#transactions').dataTable({  
     "aoColumnDefs": [ { aTargets: [0,1,2,3], sType: "custom"}] , 
     "aoColumns": [ 
       { "sSortDataType": "custom-ontop" }, 
       { "sSortDataType": "custom-ontop" }, 
       { "sSortDataType": "custom-ontop" }, 
       { "sSortDataType": "custom-ontop" }, 
       { "sSortDataType": "custom-ontop" } 
      ], 
     "aaSorting": [], 
     "aaData": [ 
      [ "2012-01-2", "2", "Local <br>0312313213", 20, "Litige" ], 
      [ "2012-03-22", "25", "Local <br>35313313213", 5540, "Valid" ], 
      [ "2012-01-2", "2", "Local <br>0312313213", 10, "Valid" ], 
      [ "2012-03-22", "25", "Local <br>35313313213", 5410, "Valid" ] 
     ] 
    });  
}); 

は基本的に、あなたはまだあなたのソート機能を使用しているが、あなたは彼らにその力のカスタムデータソースを渡すあなたのデータソースをカスタマイズミックスです値は上にとどまります。これは最後の列をソートしていると仮定しますが、ロジックを追加することができます。

http://jsbin.com/eroyac/4/edit#preview

Answer 2

ちょうどそれをソートしません。このようにtfootを使用してください。

<thead> ... </thead> 
<tfoot style="display: table-row-group"> ... </tfoot> 
<tbody> ... </tbody> 

Answer 3

私は単純な解決策を持っています。

私は私のテーブルに二tbodyを作成し、ちょうど私がそれにそうような別のtbodyを永続化するために必要なすべての行を移動：

initComplete: function() { 
    var self = this; 

    var api = this.api(); 
    api.rows().eq(0).each(function(index) { 
     var row = api.row(index); 
     if (row.data()...) { // condition here 
      var $row_to_persist = $(row.node()); 
      var $clone = $row_to_persist .clone(); 

      $(self).find('tbody:last').append($clone); 

      $total_row.remove(); 
      row.remove(); 
      api.draw(); 
     } 
    }); 
} 

Answer 4

私は最初の行をロックすることができますこの方法、およびソートのみに影響この後の行その他のオプションについては、このページをチェックしてください：http://datatables.net/reference/option/orderFixed

$('#budgytbl').dataTable({ 
 
    "orderFixed": [ 0, 'asc' ] 
 
})

<table id="budgytbl"... 
 

 
<tbody> 
 
    <tr> 
 
    <td></td> 
 
    <td id="input-name"></td> 
 
    <td id="input-parent"></td> \t 
 
    </tr> 
 

 
    @foreach ($categories as $category) 
 
    <tr> 
 
    ... 
 
    </tr> 
 
    @endforeach 
 
...