Datatable Scroll Filter Problem

Datatable Scroll Filter Problem

RheagoRheago Posts: 1Questions: 1Answers: 0

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>

Answers

  • allanallan Posts: 54,700Questions: 1Answers: 8,556 Site admin

    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

Sign In or Register to comment.