JavaScript Grid

Bind to the filter event by type: jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='log'>  
</div>
<div id='jqxWidget'>
    <div id="jqxgrid1"></div>
    
    <div id="jqxgrid2"></div>
</div>

JavaScript

var columnCount = 20

var getDataFields = function(amount){
    var fields = new Array();
    for(var i = 1; i <= amount; i += 1)
    {
        fields.push({
            name: 'int' + i,
            type: 'int'
        });
    }
    return fields;
}

var getColumns = function(amount){
    var columns = new Array();
    for(var i = 1; i <= amount; i += 1)
    {
        columns.push({
         text: 'int' + i,
         datafield: 'int' + i,
         filtertype: 'number',
         width: 50
     });
    }
    return columns;
}

 var source = {
     localdata: new Array(),
     datafields: getDataFields(columnCount),
     datatype: "array"
 };

var gridColumns = getColumns(columnCount);
var adapter = new $.jqx.dataAdapter(source);
performance.mark("1");

$("#jqxgrid1").jqxGrid({
     width: columnCount * 50,
     source: adapter,
     sortable: false,
     filterable: true,
     showfilterrow: true,
     columns: gridColumns
 });


performance.mark("2");
var jqxgrid2 = $( "#jqxgrid2" );
var jqxWidget = $( "#jqxWidget" );

// "The DOM is slow; you want to avoid manipulating it as much as possible. jQuery introduced detach() in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it." http://learn.jquery.com/performance/detach-elements-before-work-with-them/
jqxgrid2.detach(); 

$(jqxgrid2).jqxGrid({
     width: columnCount * 50,
     source: adapter,
     sortable: false,
     filterable: true,
    showfilterrow: true,
    columns: gridColumns
 });

// Reattach
jqxWidget.append( jqxgrid2 );

performance.mark("3");


var perfEntries = performance.getEntriesByType("mark");
$('#log').append("grid1 classic: " + (perfEntries[1].startTime - perfEntries[0].startTime) +"<br/>");
$('#log').append("grid2 detach: " + (perfEntries[2].startTime - perfEntries[1].startTime) +"<br/>");