时间戳

首页 > 解决方案 > 如何在 DataTables 选择输入字段顶部添加文本

javascript - 如何在 DataTables 选择输入字段顶部添加文本

问题描述

我正在使用DataTables select input并且只捕获前三列。现在，我想在选择输入的顶部添加一个文本。有没有办法在 DataTables 上添加文本。例如select product在DataTables select inputs

我正在使用数据表。这是我select inputs现在的样子：

在此处输入图像描述

这是我希望它的外观的视觉外观 - 只需添加这样的文本，说明选择某些内容。

在此处输入图像描述

这是我的代码：

 <script> 

      $(document).ready(function() {
$(".se-pre-con").fadeOut("slow");

       $('table').DataTable( {

            fixedHeader: true,

            "ordering": false,

            columnDefs: [{ 
                        targets: 7,
                        createdCell: function(td, cellData) {
                            $(td).hover(function(){
                                if (cellData === ''){
                                    $(this).css('cursor','pointer').attr('title', 'Some text');

                                }
                            })

                            }
                        }],

            language: {
                processing:     "Bitte warten ..",
                search:         "Suchen",
                lengthMenu:    "_MENU_ Einträge anzeigen",              
                info:           "_START_ bis _END_ von _TOTAL_ Einträgen",
                infoEmpty:      "Keine Daten vorhanden",
                infoFiltered:   "(gefiltert von _MAX_ Einträgen)",
                infoPostFix:    "",
                loadingRecords: "Wird geladen ..",
                zeroRecords:    "Keine Einträge vorhanden",
                paginate: {
                    first:      "Erste",
                    previous:   "Zurück",
                    next:       "Nächste",
                    last:       "Letzte"}
                },

               initComplete: function () {

                   this.api().columns().every( function () {

                       var column = this;

                       if (column.index() <3 ) {
                       var select = $('<select><option value=""></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>' )
                       } );
                   } 
                });


               }

           } );

   } );



        </script>

标签： javascriptjquerydatatables

解决方案

在 initComplete 函数内部改变这个

var select = $('<select><option value=""></option></select>')

到

var select = $('<select><option value="">Select a Platform</option></select>')

它可以工作，如果您需要为每个选择使用不同的占位符，请根据需要进行更改。

像这样的东西：https ://codepen.io/piyush_05/pen/JjGbwZY

推荐阅读