tabulator: Custom headerFilter not loaded in 3.x

Hi, I was using this custom headerFilter in 2.x and it worked perfectly, now I upgraded to 3.x (from trunk) and the header filter is not displayed anymore:

// Global variable "ajaxFilter" to be used by Tabulator's 
// to filter server-side.

ajaxFilter= function (cell, value, data){

  //create and style input
  var input = $("<input type='text' class='ajax-filter'/>");
  input.css({
    "padding-left":"2px",
    "padding-right":"2px",
    "font-weight": "normal",
    "width":"100%",
    "box-sizing":"border-box",
    "border": "1px solid gray",
    "border-radius": "1px"
  })

  //wait till element is added to dom before altering event bindings
  setTimeout(function(){
    //block existing filter event bindings
    input.off("keyup change blur keydown");

    //submit new value on change
    input.on("change", function(e){
      var tabulator = $('#' + cell.closest(".tabulator")[0].id);
      var params = tabulator.tabulator("option").ajaxParams;
      // generate parameter's list
      $(tabulator.selector + " .tabulator-header-filter .ajax-filter").each(function(){
        var element = $(this);
        var key = element.closest(".tabulator-col").data("field");

        if(element.val() !== ""){
          params[key] = element.val();
        } else {
          delete params[key];
        };
      });
      // get the original ajaxURL
      var ajaxURL = tabulator.tabulator("option").ajaxURL;
      // perform the ajax call
      tabulator.tabulator("setData", ajaxURL, params);
    });
  }, 300);

  return input;
}

This is the configuration:

      $('#my-table').tabulator({
        headerFilterPlaceholder: "",
        selectable: 1,
        pagination: "remote",
        ajaxURL: "/cgi-bin/imtranscript.bf/reports",
        height: "311px",
        columns:[
          {title:"Audio", field: "tieneaudio", sortable: true, sorter:"string", width: 100, editable: false},
          {title:"Informe", field: "tieneinforme", sortable: true, sorter:"string", width: 100, editable: false},
          {title:"Id", field: "idturno", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Estado", field: "nombreestado", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Ingreso", field: "turnosistemaexterno", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Fecha", field: "fecha", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Hora", field: "hora", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Modalidad", field: "modalidad", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Región", field: "region", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Paciente", field: "paciente", sortable: true, sorter:"string", width: 150, editable: false, headerFilter: ajaxFilter},
          {title:"Documento", field: "nrodocumento", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
          {title:"Descripción", field: "especialidad", sortable: true, sorter:"string", width: 200, editable: false, headerFilter: ajaxFilter},
          {title:"Institución", field: "institucion", sortable: true, sorter:"string", width: 150, editable: false, headerFilter: ajaxFilter}
        ]
      });

BTW, I’m also getting: TypeError: t.widget(...) is not a function tabulator.min.js:4:23182 since upgrading to 3.x, but Tabulator is displayed and works ok (with no headerFilter).

Here’s what I’m getting:

imagen

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 20 (9 by maintainers)

Most upvoted comments

Yes, I’ll try that.