修复了数据表中的行排序 [英] Fixed rows sorting in datatables

问题描述

我想在数据表的头部建立一些固定的行.

I want to establish some fixed rows in head of the 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"的行保持在顶部位置.但问题是，当我对其他列进行排序时，固定"行不会保留在表格顶部.

This will keep in top position the rows which have "MY VALUE" in text. But the problem is that when I sort on other column, the "fixed" row is not remaining on top of the table.

有什么解决办法吗?

推荐答案

这并不容易，您可以做的一件事就是将自定义排序与 自定义数据源排序 自定义您的数据源

This is not easy, one thing you could do is mix your custom sorting with a custom datasource sorting tha customizes your datasource

// 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" ]
        ]
    });    
});

基本上，您仍在使用排序功能，但您向它们传递了一个自定义数据源，该数据源强制值保持在最前面.这假设您对最后一列进行排序，但您可以向其中添加逻辑.

Basically you are still using your sorting function but you pass them a custom datasource that forces the values to stay on top. This assume that you are sorting on the last column, but you can add your logic to it.

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

这篇关于修复了数据表中的行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！