Jquery数据表排序和过滤记录 [英] Jquery Data Table Sorting and filtering records

问题描述

使用Jquery DataTable，我设法在每个列的顶部创建具有唯一的过滤值的下拉列表。但问题是当我点击下拉列表也被激活。我只想在用户点击排序箭头图标时排序记录。 当用户点击下拉菜单时，是否有任何方式取消排序事件，但是保持启用，以便用户可以点击排序图标排序数据？这里是一个链接到数据表Live < a href =http://live.datatables.net/ribezoho/1/edit =nofollow> http://live.datatables.net/ribezoho/1/edit

请让我知道

这是我的代码

initComplete：function（）{
var api = this.api（）;

api.columns（）。indexes（）。flatten（）。each（function（i）{
var column = api.column（i）;
var title = $（'＃example thead th'）。eq（i）.text（）;
var select = $（'< select>< option value =>'+标题+'< / option>< / select>'）
.appendTo（$（column.header（））。empty（））
.on（'change'，function（） b $ b var val = $ .fn.dataTable.util.escapeRegex（
$（this）.val（）
）;

列
.search（val？'^'+ val +'$'：''，true，false）
.draw（）;
}）;

column.data（）。unique（）。sort（）。each（function（d，j）{
select.append（'< option value ='+ d + >'+ d +'< / option>'）
}）;
}）;
}
}）;
}）;

解决方案

添加点击处理程序到您的< select> 调用 event.stopPropagation（ ） 。这将防止点击事件从< select> 冒泡起来到< th> 。 p>

http://live.datatables.net/ ribezoho / 20 /编辑

Using Jquery DataTable, I managed to create drop downs on top of each column having unique values for filtration. But the problem is when i click on the drop down sorting also gets activated. I only want to sort records when user clicks on "sorting arrow icons". Is there any way to cancel sorting event while user is clicking onto the drop down, but keep it enabled so that user can click on sorting icons to sort the data ? Here is a link to Data Table Live http://live.datatables.net/ribezoho/1/edit

Please let me know

This is my code

$(document).ready(function() {
$('#example').DataTable( {
    initComplete: function () {
        var api = this.api();

        api.columns().indexes().flatten().each( function ( i ) {
            var column = api.column( i );
            var title = $('#example thead th').eq(i).text();
            var select = $('<select><option value="">'+title+'</option></select>')
                .appendTo( $(column.header()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
} );
} );

解决方案

Add a click handler to your <select> that calls event.stopPropagation(). This will prevent the click event from bubbling up from the <select> to the <th>.

http://live.datatables.net/ribezoho/20/edit

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