Как добавить текст поверх DataTables выберите поле ввода - PullRequest
Новая
       8

Как добавить текст поверх DataTables выберите поле ввода

0 голосов
/ 18 июня 2020

Я использую DataTables select input и захватываю только первые три столбца. Прямо сейчас я хотел бы добавить текст поверх полей выбора. Есть ли способ добавить текст в DataTables. Например, select product на DataTables select inputs

Я использую DataTables. Вот мой select inputs мой внешний вид:

enter image description here

Вот визуальный вид того, каким я хотел бы быть - просто добавив текст вроде этого, в котором говорится: выберите что-нибудь.

enter image description here

Вот мой код: 

 <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>

1 Ответ

1 голос
/ 18 июня 2020

Внутри функции 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

...