想要在尝试排序数据时触发自定义事件

时间:2021-05-02 14:25:33

When the user clicks on a column header to sort, I want to fire my own event. I DO NOT want it to sort. I've been doing research, and don't see a good way to do this.

当用户单击列标题进行排序时,我想启动自己的事件。我不希望它排序。我一直在做研究,但没有找到一个好的方法。

I can bind on the sort event to do my own stuff, but the sort still happens. I don't want this. If I disable sorting, then the sort event never fires, so this does not work either.

我可以绑定到排序事件来做我自己的事情,但是排序仍然会发生。我不希望这样。如果我禁用排序,那么排序事件永远不会触发,所以这也不能工作。

I could disable sort and then try and capture click events on the header, but I was hoping there would be a better way to do this. Anyone have any ideas?

我可以禁用排序,然后尝试捕获页眉上的单击事件,但是我希望有更好的方法。谁有什么好主意吗?

1 个解决方案

#1


12  

Very easy. You just unbind the click.DT handler and add your own. You dont have to disable sorting.

非常容易。你只是松开了点击。DT处理器,添加你自己的。你不必禁用排序。

example

例子

<table id="example">
<thead>
   <th id="id">ID</th>
   <th id="username">Username</th>
</thead>
<tbody>
    <tr><td>1</td><td>A test</td></tr>
    <tr><td>2</td><td>B test</td></tr>
    </tbody>       
</table>

javascript

javascript

$(document).ready(function(){
    //init datatables
    var table = $('#example').dataTable();

    //unbind sort event, prevent sorting when header is clicked
    $('#example th').unbind('click.DT');

    //create your own click handler for the header
    $('#example th').click(function(e) {
        alert('Header '+$(this).attr('id')+' clicked');
        //here you can trigger a custom event
    });

    //if you afterwards want to restablish sorting triggered by a click event 
    //here header "username" from example above
    table.fnSortListener(document.getElementById('username'), 1);
});

Note : There is no dedicated "sort"-event in datatables. Allan Jardine mention it may come in a future version 2. http://datatables.net/forums/discussion/5141/capturing-sort-event-on-table-heading/p1

注意:在datatable中没有专用的“sort”事件。Allan Jardine提到它可能会在未来的版本2中出现。http://datatables.net/forums/discussion/5141/capturing-sort-event-on-table-heading/p1

#1


12  

Very easy. You just unbind the click.DT handler and add your own. You dont have to disable sorting.

非常容易。你只是松开了点击。DT处理器,添加你自己的。你不必禁用排序。

example

例子

<table id="example">
<thead>
   <th id="id">ID</th>
   <th id="username">Username</th>
</thead>
<tbody>
    <tr><td>1</td><td>A test</td></tr>
    <tr><td>2</td><td>B test</td></tr>
    </tbody>       
</table>

javascript

javascript

$(document).ready(function(){
    //init datatables
    var table = $('#example').dataTable();

    //unbind sort event, prevent sorting when header is clicked
    $('#example th').unbind('click.DT');

    //create your own click handler for the header
    $('#example th').click(function(e) {
        alert('Header '+$(this).attr('id')+' clicked');
        //here you can trigger a custom event
    });

    //if you afterwards want to restablish sorting triggered by a click event 
    //here header "username" from example above
    table.fnSortListener(document.getElementById('username'), 1);
});

Note : There is no dedicated "sort"-event in datatables. Allan Jardine mention it may come in a future version 2. http://datatables.net/forums/discussion/5141/capturing-sort-event-on-table-heading/p1

注意:在datatable中没有专用的“sort”事件。Allan Jardine提到它可能会在未来的版本2中出现。http://datatables.net/forums/discussion/5141/capturing-sort-event-on-table-heading/p1