Question

所以基本上单击一行时，我会向该父TR添加一个类。然后我重绘了桌子。

$('#datatables').on( 'click', 'tbody tr:not(".group")', function (e) {
        if($(this).hasClass('transfer')) {
            $(this).toggleClass('selected');
        }

        table
                .order( [ 7, 'asc' ] )
                .draw();    
        if($('tr.selected').length > 0) {
            $('#ts_btn').removeClass('hidden'); 
        } else {
            $('#ts_btn').addClass('hidden');    
        }
    } );

但是如何让表格将所选行放在顶部？

我试过了：

"columnDefs": [
            {
                "targets": [7],
                "visible": false,
                render: function ( data, type, row ) {                  
                  if (type == 'sort') {
                      return $(row).hasClass('selected') ? 1 : 0;
                  }  else {
                      return data;
                  }    
                }  
            }
        ],

但它不起作用。

我没有使用新的数据表行选择的原因是因为我使用条形码扫描器进行读取，并根据选择行的方式进行过滤。（除了点击行）

Answer 1

这是实现这一目标的一种方法：

创建一个隐藏的列。

var columnDefs = [
    //... Some other columns...
    {
        title: "selected",
        visible: false,
        searchable: false
    }
];

用零填充它。

var dataSet = [
    [
        // some data,
        0
    ]
    // ...
]

在该列上启用fixed descending order。

myTable = $('#example').DataTable({
    orderFixed: [
        0, // index of the hidden column
        'desc'
    ],
    data: dataSet,
    columns: columnDefs,
    select: 'multiple'
});

在选择事件时，浏览选定的行，并将隐藏列的单元格值设置为1。

myTable.on('select.dt deselect.dt', function (e, dt, type, indexes) {
    if (type === 'row') {
        var $rows = myTable.rows(indexes);
        var data = e.type === 'select' ? 1 : 0;
        $rows.every(function(index){
            myTable.cell(index, 6).data(data);
        });
    }
});

正在工作的jsFiddle：https://jsfiddle.net/vctls/es8h2zo9/

我特别需要一种无论用户定义排序如何都首先保留选定行的方法，但是您可以更改选择器和事件处理程序以适应您的需求。
如果您不想添加所有零，但有可能找到一种使它与静态数据一起使用的方法，但我找不到一个。
此外，这显然无法在服务器端分页时立即使用。

数据表首先对具有特定类名的行进行排序

1 个答案: