Исправлена ​​сортировка строк в таблицах данных

Question

Я хочу установить несколько фиксированных строк в начале таблицы данных.

Это мои настройки данных:

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ЗНАЧЕНИЕ "в тексте.Но проблема в том, что когда я сортирую по другому столбцу, «фиксированная» строка не остается поверх таблицы.

Есть какие-нибудь решения?

Answer 1

Только не сортируйте это.Используйте tfoot вот так -

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

Answer 2

Это не легко, одну вещь, которую вы могли бы сделать, это смешать вашу пользовательскую сортировку с пользовательской сортировкой источника данных , которая настраивает ваш источник данных

// 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 3

Таким образом, я могу заблокировать первую строку, и сортировка влияет только на строку после этой. Проверьте эту страницу для других вариантов: 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>	
  </tr>

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

Answer 4

У меня есть более простое решение.

Я создаю второй 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();
        }
    });
}