Datatable Scroll Filter Problem

Rheago

In Google web application, I am using "datatables". I froze the first 3 columns in my table. But when I freeze the filtering function does not work. How can I solve the problem?

HTML JS

<script>



  document.addEventListener('DOMContentLoaded', function() 
  {
    google.script.run.withSuccessHandler(generateTable).getTableData();

 

  });
function generateTable(dataArray)
{
      var tbody = document.getElementById("table-body");

        dataArray.forEach(function(r){  

        var row = document.createElement("tr");
        for(i=0; i<368; i++) {
              var col = document.createElement("td");
              col.textContent = r[i];
              row.appendChild(col); 
  
              
        }
        tbody.appendChild(row);
  });

    $('#example thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#example thead');

   
 
    var table = $('#example').DataTable({
        language: { url: '//cdn.datatables.net/plug-ins/1.11.2/i18n/tr.json' },
        buttons: ['copy', 'excel', 'pdf', 'print'],
        scrollX:                true,
        colReorder: true,
        fixedColumns: {
        leftColumns: 3
    },
                

        

        "sDom":"Bltipr",
        
        "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if (aData[2] == "Evet") {
        $('td', nRow).css('background-color', '#F9E79F');
      }
    },
    
        orderCellsTop: true,
        fixedHeader: true,
        initComplete: function () {
            var api = this.api();
 
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('<input type="search" border-left: 1px solid #000000 placeholder="' + title + '" />');
 
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('keyup change', function (e) {
                            e.stopPropagation();
 
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
 
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
 
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
   
        },
    });

//DİL


}





  </script>

allan

Try the nightly version of FixedColumns which makes this kind of thing much easier. You'll need to use the nightly CSS as well.

Allan