使用DataTable时，在select下拉列表下添加特定的表头名称 [英] Add specific table head name under select dropdown while using the DataTable

问题描述

在我的Laravel项目中，我使用的是数据表，在该表中对特定列使用了过滤.但是主要的问题是，在我的下拉列表中，我想呈现特定列的标题列名称.有人可以帮助我解决这个问题吗?

In my Laravel project, I'm using the datatables where I use the filtering for specific column. But the main problem is that in my dropdown list I want to render the head column name for the specific column. can anyone help me out of this problem on how to get this?

<script>
    $(document).ready(function() {
    $('#exampletable').DataTable( {
        initComplete: function () {
            this.api().columns([3,4,5,7]).every( function () {//THis is used for specific column
                var column = this;
                var select = $('<select><option value="">Specific column Name</option></select>')
                    // .appendTo( $(column.footer()).empty() )
                    .appendTo( '#filltertable' )
                    .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 ) {
                    var val = $('<div/>').html(d).text();
                    select.append( '<option value="'+val+'">'+val+'</option>' )
                } );
            } );
        }
    } );
} );
</script>

推荐答案

现在我已经解决了我真正想要的问题

Now I've solve this problem what I actually want's

<script>
    $(document).ready(function() {
    $('#exampletable').DataTable( {
        "ordering": false,
        initComplete: function () {
            this.api().columns([2,3,4,8]).every( function (d) {//THis is used for specific column
                var column = this;
                var theadname = $('#exampletable th').eq([d]).text();
                var select = $('<select class="mx-1"><option value="'+d+'">'+theadname+': All</option></select>')
                    .appendTo( '#filtertable' )
                    .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 ) {
                    var val = $('<div/>').html(d).text();
                    select.append( '<option value="'+val+'">'+val+'</option>' )
                } );
            } );
        }
    } );
} );
</script>

这篇关于使用DataTable时，在select下拉列表下添加特定的表头名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！